React Three Fiber Animate when the canvas gets changed

Question

I am using r3f to make a 3d slideshow for when the user click next it slide to the next slideshow but I want to trigger an animation when the user moves to the next slideshow some sort of glitch effect or something and only trigger once the 2nd slideshow appear and when the user switch between slideshows it keeps triggering but only once, here is my code that i use in react , the models is came from react-three/drei library.

  const models = [
    { model : <Sphere/> ,
    }
    ,
    {model : <Box/> ,
   },
   { model: <Sphere/>, 
  },
  { model: <Ring innerRadius={0.5} outerRadius={1} />, 
    }
  ];

  const [modelIndex, setModelIndex] = useState(0);
  const intervalDuration = 5000;
  const modelCount = models.length;

  useEffect(() => {
    const intervalId = setInterval(() => {
      setModelIndex((index) => (index + 1) % modelCount);
    }, intervalDuration);

    return () => clearInterval(intervalId);
  }, [modelCount]);
{models.map((model, index) => (
         index === modelIndex && 
         <div className="canvas-wrapper" key={index}>
            <Canvas key={index}>
            <Environment preset="sunset"/>
            <ambientLight />
            <pointLight position={[10, 10, 10]} />
             <group>
               {model.model}
             </group>
          </Canvas>
         </div>
        ))}

the useEffect hook only helps to change the model every 5s , I want to trigger a shader animation on every canvas created , please how can I achieve that?