I am working with hooks. This is my component with 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>
);

What is happening here is when I am clicking on the "Start Cut" button it just throws error for continuously updating state. Not sure what is going. Any help would be much appreciated. thanks