Функция отключения звука для приложения React на мобильных устройствах iOS

Недавно я добавил в свое приложение флажок, который работает как тумблер для созданной мной функции отключения звука. Он отлично работает во всех настольных браузерах (Chrome, Safari, Mozilla и Edge) и на устройствах Android, но по какой-то причине не работает на мобильных устройствах iOS (iPhone 12 iOS v14.1 и iPad iOS v14.1). .

Вот мой код, за вычетом лишнего для удобочитаемости.

const Header = () => {
  
  ...
  
  const [mute, setMute] = useState(false);
  const location = useLocation();

  ...
  
  const toggleMute = (check: boolean) => {
    setMute(check);
    if (check) audioFiles[`${location.pathname.substr(1)}_${gender}`].volume = 0;
    else audioFiles[`${location.pathname.substr(1)}_${gender}`].volume = 1;
  };
  
  return (
    <div>
      <AppBar position = "fixed">

        ...

        <div>
          <input
            type = "checkbox"
            name = "mute"
            id = "mute"
            onClick = {(event) => toggleMute(event.currentTarget.checked)}
            checked = {mute}
            disabled = {location.pathname.endsWith('home')}
          />{' '}
          Mute
        </div>

        ...

      </AppBar>
    </div>
  );
}

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

Я пытался использовать onChange как вместо onClick, так и с ним, но это не имело значения, которое я мог видеть.

ПРИМЕЧАНИЕ. Аудиофайлы сохраняются в массиве, доступны в приложении и называются в зависимости от местоположения и пола, которые выбирает пользователь.

Почему это будет работать везде, но не на мобильной iOS?

Я могу предоставить больше кода, если это необходимо.

ПРИМЕЧАНИЕ. У меня была аналогичная проблема с iOS, которая вообще не позволяла воспроизводить мой звук, потому что он не использовал элементы управления для воспроизведения. Я понял это, объединив аудио в один файл.