UseEffect выдает исключение DOMException при использовании HTMLAudioElement

Я написал собственный хук React под названием useAudio для воспроизведения звуков в фоновом режиме моего приложения.

Почему useEffect бросает Uncaught (in promise) DOMException?

Я сузил проблему до второго useEffect внутри моего пользовательского хука. Этот эффект запускается, когда логическое значение, указывающее, изменяется ли звук playing.

Все, что React говорит, это Uncaught Error: The error you provided does not contain a stack trace.

Я также попытался изменить audio как обычную константу вместо объявления через хук useState, но это не решило проблему.

import React, { useState, useEffect } from 'react'
import styled from 'styled-components'

const useAudio = (url: string) => {
  if (typeof Audio !== 'undefined') {
    const [audio] = useState(new Audio(url))
    const [playing, setPlaying] = useState(false)

    const toggle = () => setPlaying(!playing)

    useEffect(() => {
      audio.loop = true
      audio.autoplay = true
    })

    useEffect(() => {
      playing ? audio.play() : audio.pause()
      return () => {
        audio.pause()
      }
    }, [playing])

    return [playing, toggle]
  }
}

const AudioPlayer: React.FC<{ url: string }> = ({ url }) => {
  if (typeof Audio !== 'undefined') {
    const [playing, toggle] = useAudio(url)

    return (
      <AudioContainer>
        {typeof playing !== 'undefined' && (
          <Button onClick = {() => toggle()}>
            {playing ? 'Stop music' : 'Play music'}
          </Button>
        )}
      </AudioContainer>
    )
  }
  return null
}

export default AudioPlayer

Работает в живое приложение.

это нет работает в этом изолированном Кодыпесочница.

Я ожидаю, что звук начнется, когда компонент будет смонтирован, и исключения DOMException не будут выброшены.