Issues in useFrame hook in animating the uniforms of custom shader.

[Akash-cloud001]

Here the minimal code

Untitled.video.-.Made.with.Clipchamp.4.mp4

`import React, { forwardRef, useRef } from "react";
import { useFrame } from "@react-three/fiber";
import VertexShader from "../../glsl/ImgShader/VertexShader.glsl";
import FragmentShader from "../../glsl/ImgShader/FragmentShader.glsl";
import * as THREE from "three";
import { useTexture } from "@react-three/drei";

const ImageShader = forwardRef(({ textureSrc, isHovered }, ref) => {
const materialRef = useRef();
const texture = useTexture(textureSrc);

// Set texture properties
texture.generateMipmaps = true;
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.x = -1;
texture.offset.x = 1;

// Animation loop
useFrame((delta) => {
if (materialRef.current) {
if (isHovered) {
console.log('enters')
materialRef.current.uniforms.uTime.value += delta; // Animate on hover
} else {
console.log('leaves')
materialRef.current.uniforms.uTime.value = materialRef.current.uniforms.uTime.value; // Reset when not hovered
}
}
});

return (

<planeGeometry args={[8, 10, 16, 16]} />
<shaderMaterial
ref={materialRef}
vertexShader={VertexShader}
fragmentShader={FragmentShader}
side={THREE.DoubleSide}
uniforms={{
uTime: { value: 0.0 },
uTexture: { value: texture }, // Use the loaded texture
}}
// wireframe={true}
/>

);
});

export default ImageShader;

`