How to animate visibility of mesh in react three fiber?

Question

I have a 3D model. I have the access to the mesh. What I want is to animate the visibility on button click. When I press a button the mesh should be invisible but not instantly. I want to make it in an animated way. It will be invisible in some steps. Like taking 2 sec of time to be invisible with a transition. How can I do that with react three fiber? I'm new in React-three/fiber.

Code I tried:

 useEffect(() => {
    if (props.miscOpen === true) {
      Object.keys(materials).forEach(function (prop) {
        if (prop.includes("_350")) {
          gsap.to(materials[prop],{duration:5,opacity:0})
          
        }
      });
    } else {
      
    }
  }, [props.miscOpen]);

Answer 1

Are you setting the material's .transparent property to true?
If the material's transparent property is not set to true, the material will remain fully opaque and this value (opacity) will only affect its color. see here