Estoy trabajando con ganchos. Este es mi componente con react-number-format

 const [startDuration, setStartDuration] = useState(0) const [streamDetail, setStreamDetail] = useState({}) const onChangeStartDuration = ({ formattedValue }) => { setStartDuration(formattedValue); } const function1 = async () => { const { value } = await getVideos({ id }) const [state, setState] = useState({ videoUrl: 0, videoThumbnailUrl: 0, player: false, startTime: 0, endTime: 0, serverAddress: "", title: "", liveVideoUrl: "", }) if (value.success) { setStreamDetail(value.stream) setState({ ...state, liveVideoUrl: value.stream.url, serverAddress: value.stream.server_address }) } } useEffect(() => { myfunction1() }, []) useEffect(() => { if (window.jwplayer) { setFunc(window.jwplayer("xxxxxx")) } }, [window.jwplayer, state.liveVideoUrl]); return ( <div className=""> <div className=""> <button className="btn-s-one fill" onClick={() => { setStartDuration(func.getPosition()); }} > Start Cut </button> </div> <div className=""> <div className=""> <div className=""> <div className=""> <label>Start Cut</label> <NumberFormat type="text" format="## : ## : ##" value={conevetIntoHMS(startDuration)} onValueChange={onChangeStartDuration} /> </div> </div> </div> </div> </div> );

Lo que está sucediendo aquí es que cuando hago clic en el botón "Iniciar corte", simplemente arroja un error para actualizar continuamente el estado. No estoy seguro de lo que está pasando. Cualquier ayuda sería muy apreciada. Gracias