React JS Sound controlling not work in Apple phones

This code for sumarized. simply i want a website create for play 4 audios same time and user can controll volume each audio. I implement it and its work properly in desktop and android mobiles. But its sound controlling part is not working in apple phones. volume bar is working but not adjest volume. any special keyword or something fix this for ios mobile?

import React, { useState } from 'react';

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

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

  const handleVolumeChange = (event) => {
    const newVolume = event.target.value;
    setVolume(newVolume);

    const audioElement = document.getElementById('audioElement');
    if (audioElement) {
      audioElement.volume = newVolume / 100;
    }
  };

  return (
    <div>
      <button onClick={togglePlay}>
        {isPlaying ? 'Pause' : 'Play'}
      </button>
      <input
        type="range"
        min="0"
        max="100"
        value={volume}
        onChange={handleVolumeChange}
      />
      <audio id="audioElement" loop>
        <source src="/assets/audio/bird-audio.mp3" type="audio/mp3" />
      </audio>
    </div>
  );
};

export default AudioPlayer;

I want fixed code or reference how to fix it.