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]);