Here is my code:

useEffect(() => {
    playerRef.current.seekTo(convertedflat[currentTimeIndex], 'seconds');
  });
  return (
    <>
      <main>
        <div className={style.main_container}>
          <NavBar />

          <div className={style.heronext}>
            <div className={style.hero_container}>
              <ReactPlayer
                ref={playerRef}
                playing
                controls={true}
                url={`videos/${episList[currentEpisodeIndex]}.mkv`}
                width="90%"
                height="55rem"
                />
               </div>

              <button
              className={style.next}
              onClick={() => {
                setCurrentTimeIndex((prevTimeIndex) => prevTimeIndex + 1) %
                  convertedflat.length;

                setcurrentEpisodeIndex((prevTimeIndex) => prevTimeIndex + 1) %
                  convertedflat.length;

                console.log(currentTimeIndex);
                console.log(currentEpisodeIndex);
              }}
            >
              Next
            </button>

basically when you click on the next button it moves to the next timestamp until the array finishes. but I want to it starts again when the array list is finished.Currently when the array navigation is finished it shows error.

I used % length but it doesnt work. Here is the error message when the list is finished:

TypeError: Failed to set the 'currentTime' property on 'HTMLMediaElement': The provided double value is non-finite.