javascript – React JS Sound controlling not work in Apple telephones

This code for sumarized. merely i desire a web site create for play 4 audios similar time and consumer 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 cell?

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
        kind="vary"
        min="0"
        max="100"
        worth={quantity}
        onChange={handleVolumeChange}
      />
      <audio id="audioElement" loop>
        <supply src="/belongings/audio/bird-audio.mp3" kind="audio/mp3" />
      </audio>
    </div>
  );
};

export default AudioPlayer;

I need mounted code or reference the best way to repair it.