переключение треков в плеере React

делаю плеер на react и столкнулся с проблемой что не понимаю как сделать переключение следующего трека у меня есть переменна

let currentTrackPath = urls[0];

это самый первый трек в массиве

далее я создаю сам плеер и сую его в useMemo что бы при нажатии play несколько раз звук не дублировался

const audio = useMemo(
    () => new Audio(`${service_url}${currentTrackPath}`),
    [currentTrackPath]
  );

после этого создаю функции play и pause

const TogglePlay = () => {
    useTrack.setState({ play: true });
    audio.play();
    audio.currentTime
  };
  const TogglePause = () => {
    useTrack.setState({ play: false });
    audio.pause();
  };

и затрудняюсь я как раз на переключении трека я создал функцию

const [activeIndex,setActiveIndex] = useState(0)

const ToggleNext = () => {
    if (activeIndex < urls.length) {
      const setNextIndex = setActiveIndex(current => current+1)  
      currentTrackPath = urls[activeIndex]
      audio.src = currentTrackPath
    }
  };

и вешаю на клик на всякий случай я консолил сам элемент audio что бы посмотреть на его src и он меняется но сам трек не переключается я подозреваю что дело в useMemo но проблему решить не могу