Maximum update depth exceeded when using React-Router

Using the Provider and audio hooks under React-Router produces a Maximum update depth exceeded error loop

const routes = {
  '/': () => <Provider station='clouds' />,
  '/:station': ({ station }) => <Provider station={station} />
}

function Provider ({ station }) {
  return (
    <AudioPlayerProvider>
      <Radio station={station} />
    </AudioPlayerProvider>
  )
}

function Radio (props) {
  const [song, setSong] = useState({
    album: 'Press the Play button to start the radio',
    title: placeholders[Math.floor(Math.random() * placeholders.length)]
  })

  const { togglePlayPause, ready, loading, playing, volume, mute } = useAudioPlayer({
    src: `https://play.squid-radio.net/${props.station}?cache_ts=${new Date().getTime()}`,
    onend: () => console.log('sound has ended!')
  })

  return (
    <div />
)
}

const App = () => {
  const routeResult = useRoutes(routes)
  return routeResult || (
    <script>{(
      window.location.href = '/404.html'
    )}
    </script>
  )
}

Environment (please complete the following information):

• Browser/ browser version: Firefox 81.0.2 64-bit
• Library version: 1.2.2
• React version: 16.13.1
• Node version: 14.x

[E-Kuerschner]

hey @jorgev259 I think I’m on to something. I should hopefully have a release out by the weekend with a fix or work-around for the issue you are having with streaming audio

[E-Kuerschner]

I recently discovered some code that could lead to an infinite loop and fixed it in version: https://www.npmjs.com/package/react-use-audio-player/v/1.2.5

Curious if this will alleviate any of the issues mentioned above