Click able Three js Object R3F with React js

[@paradise_hope]

import { useEffect, useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { OrbitControls, useAnimations, useGLTF } from '@react-three/drei'
function Box(props) {
// This reference gives us direct access to the THREE.Mesh object
const ref = useRef()
// Hold state for hovered and clicked events
const [hovered, hover] = useState(false)
const [clicked, click] = useState(false)
// Subscribe this component to the render-loop, rotate the mesh every frame
useFrame((state, delta) => (ref.current.rotation.x += delta))
// Return the view, these are regular Threejs elements expressed in JSX
return (
click(!clicked)}
onPointerOver={(event) => (event.stopPropagation(), hover(true))}
onPointerOut={(event) => hover(false)}>

)
}
const Character = () => {
const [hovered, hover] = useState(false)
const [clicked, click] = useState(false)
//const { scene, animations } = useGLTF('/SuitMan.glb');
const ref =useRef()
const { scene, animations } = useGLTF('/SM.glb');
const { actions } = useAnimations(animations, ref);
console.log("actions animation",actions)
useFrame((state, delta) => {
console.log("useFram runing....".hovered)
if(clicked){
actions.Walking.play()
}
else{
actions.Walking.stop()
}
if(hovered){
actions.Jumping.play()
}
else{
actions.Jumping.stop()
}
});
useEffect(()=>{
console.log("clicked",clicked)
},[clicked])
return(
{scene && (
click(!clicked)}
onPointerOver={(event) => (event.stopPropagation(), hover(true))}
onPointerOut={(event) => (event.stopPropagation(),hover(false))}>
{
ref.current = node; // Assign to physics ref
// Assign to animation ref
}}/>
)}
)
}
export default function App() {
return (




)
}