Mute Function for React App on iOS Mobile Devices

I recently added a checkbox to my app that functions as a toggle switch for the mute function I created. It works fine on all desktop browsers (Chrome, Safari, Mozilla, and Edge) and on Android devices, but for some reason, it will not work on mobile iOS devices (iPhone 12 iOS v14.1, and iPad iOS v14.1).

Here is my code, minus excess for readability.

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>
  );
}

I can click on the checkbox and it will read as checked, but the mute toggle doesn't seem to trigger.

I tried using onChange both instead of and with the onClick, but it didn't make a difference that I could see.

NOTE: The audio files are saved in an array, accessible throughout the app, and named based on the location and the gender the user selects.

Why would this work everywhere else, but not on mobile iOS?

I can provide more code if needed.