Show currentTime from wavesurfer.js triggers too many re-renders in React

I’m using this wavesurfer.js package with React for display wave form of audio. I want to display the current elapsed time using this getCurrentTime() method in their docs and answer here on github.

I got the elapsed time in seconds and update my React state to display it. However, it updates quite frequently, more than 10 times per second which trigger my component to re-render multiple times. I wonder if there is a way to make it only trigger state changes on each seconds pass?

export function Component(){
    const [currentTime, setCurrentTime] = useState(0)
    const wavesurferRef = useRef<any>(null)


    useEffect(()=>{
        if (wavesurferRef.current){
            wavesurferRef.current.on('audioprocess', function () {

                //ISSUE: THIS MAKE COMPONENT RE-RENDERING TOO MANY TIME
                setCurrentTime(wavesurferRef.current.getCurrentTime())
            })
        }
    },[])
    

    return(
        <div ref={wavesurferRef}>
        </div>
    )
}