onVolumeChange(e) is called with a SyntheticBaseEvent, but I need new volume

[robertlight]

I am playing an mpg url via:

<ReactPlayer className={'react-player'}
           onVolumeChange={handleVolumeChange}     <<<----- THIS SEEMS TO NOT WORK PROPERLY
           ref={inputRange}
           poster={''}
           width='100%'
           height={currentMediaData.type==='audio'?'50px':'100%'}
           url={currentMediaData?.mediaUri}
           pip={pip}
           playing={playing}
           controls={controls}
           light={light}
           loop={loop}
           playbackRate={playbackRate}
           volume={volume}
           muted={muted}
           onReady={() => {
               return 'onReady'
           }}
           onStart={() => setStarted(true)}
           onPlay={handlePlay}
           onBufferEnd={onBufferEnd}
           onPause={() => {
               setPlaying(false);
           }}
           onBuffer={() => {
               setIsBuffering(true);
           }}
           onSeek={e => onSeekTo(e)}
           onError={(e) => onPlayerError(e)}
           onProgress={handleProgress}
           onDuration={handleDuration}
/>

and when onVolumeChanged gets fired when the user changes the volume, it calls 'handleVolumeChange' where the argument is a SyntheticBaseEvent (see image below from webstorm)

I want to get the new volume level so I can update the state variable. Is there another means to get the new volume?

[robertlight]

I am currently using this HACK within my handleVolumeChange event handler... setState( {...state,volume: document.getElementsByTagName('audio')[0].volume});

There must be a more elegant 'react-like' method without resorting to document.getElementsByTagName()

[luwes]

This is expected. You can access the volume by accessing a ref.current.volume instead of using document.getElementsByTagName()