Estoy construyendo un reproductor de audio personalizado en React JS, actualmente estoy atascado con los controles de volumen en el reproductor de audio

Aquí está mi código

La barra de progreso funciona bien. ¿Cuál debería ser la lógica detrás del control de volumen?

 const [currentTime, setCurrentTime] = useState(0); const progressBar = useRef(); const audioPlayer = useRef();

AduioPlayer.js

 .... <audio ref={audioPlayer} src="something.mp3" preload="auto" volume ></audio> // Volume Control Range slider <input type="range" defaultValue="0" className="mx-2 progressBarvolume bar volume" /> // Progress Bar <input type="range" className="progressBar bar" defaultValue="0" ref={progressBar} onChange={changeRange} /> ....

Función de cambio de rango:

 const changeRange = () => { audioPlayer.current.currentTime = progressBar.current.value; changePlayerCurrentTime(); };

función changePlayerCurrentTime:

 const changePlayerCurrentTime = () => { progressBar.current.style.setProperty( "--seek-before-width", `${(progressBar.current.value / duration) * 100}%` ); setCurrentTime(progressBar.current.value); };