javascript – React JS Sound controlling not work in Apple telephones

This code for sumarized. merely i need a web site create for play 4 audios similar time and person can controll quantity every audio. I implement it and its work correctly in desktop and android mobiles. However its sound controlling half just isn’t working in apple telephones. quantity bar is working however not adjest quantity. any particular key phrase or one thing repair this for ios cellular?

import React, { useState } from 'react';

const AudioPlayer = () => {
  const [isPlaying, setIsPlaying] = useState(false);
  const [volume, setVolume] = useState(50); // Preliminary quantity worth (between 0 and 100)

  const togglePlay = () => {
    const audioElement = doc.getElementById('audioElement');
    if (audioElement) {
      if (isPlaying) {
        audioElement.pause();
      } else {
        audioElement.play();
      }
      setIsPlaying(!isPlaying);
    }
  };

  const handleVolumeChange = (occasion) => {
    const newVolume = occasion.goal.worth;
    setVolume(newVolume);

    const audioElement = doc.getElementById('audioElement');
    if (audioElement) {
      audioElement.quantity = newVolume / 100;
    }
  };

  return (
    <div>
      <button onClick={togglePlay}>
        {isPlaying ? 'Pause' : 'Play'}
      </button>
      <enter
        sort="vary"
        min="0"
        max="100"
        worth={quantity}
        onChange={handleVolumeChange}
      />
      <audio id="audioElement" loop>
        <supply src="/belongings/audio/bird-audio.mp3" sort="audio/mp3" />
      </audio>
    </div>
  );
};

export default AudioPlayer;

I need fastened code or reference the right way to repair it.