@React-three/fiber hide and show group from another group interaction by group name?

Question

I'm new to @react-three/fiber also reactjs,how can i hide one group from mouseclick on another group?

const ref = useRef();

const Hide=()=>{
      ref.current.visible=false;
     /*??*/
}
return(
<group {...props} dispose={null} >
      <group ref={ref} rotation={[0, -0.66, 0]} onPointerDown={Hide}>
        <mesh geometry={nodes.base_sphere_1.geometry} material={materials.BasePlanet} />
        <mesh geometry={nodes.base_sphere_2.geometry} material={materials.Cocholate} />
        </group>
      <group rotation={[0, -0.66, 0]} name={"needtovisible"} visible={false}>
        <mesh geometry={nodes.apartment02_1.geometry} material={nodes.apartment02_1.material} />
        <mesh geometry={nodes.apartment02_2.geometry} material={materials.Blue} />
      </group>
 </group>
)

thanks in advance

Note: need to use the group name instead using usestate on click