ReactJS ProgressBar value is not updating on par with state.progressValue

Question

I'm currently using import { Progress } from 'react-sweet-progress'; and before I also tried import { Progress } from 'reactstrap'; which just uses bootstrap 4 ProgressBar.

I have a state that maintains the progressValue, and using audio HTML tag to call in an online audio src and playing it. During timeupdate eventListener, I update my progressValue in my state, and reflect it back by setting the value of <Progress> as this.state.progressValue.

class FooBar extends Component {
    state = {
         progressValue: 0
    }

    handleProgress = () => {
        this.currentTimeInterval = null;

        this.audio.onplay = () => {
            this.setState({
                progressValue: 0,
                play: true
            });

        this.audio.addEventListener('timeupdate', () => {
            this.setState({
                progressValue: Math.floor(this.audio.currentTime / this.audio.duration * 100)
            }, function() {
                console.log(this.state.progressValue);
            })
        }, true)

        this.audio.onpause = () => {
            clearInterval(this.currentTimeInterval);
        }
    }

    render() {
        return(
            <audio 
                ref={(audio) => { this.audio = audio }} 
                src={http://www.music.helsinki.fi/tmt/opetus/uusmedia/esim/a2002011001-e02.wav} 
                autoPlay 
                onLoadedData={this.handleProgress}
            />
            <Progress value={this.state.progressValue} />
        );
    }
}

The timing, however, doesn't seem to match up where the audio will be playing and the progressValue will be delayed in the sense that audio will be ahead of the progressValue. Hence, by the time audio finishes, it would likely take another 2~3 seconds for the progressBar to reach 100%.

I also tried:

this.currentTimeInterval = setInterval(() => {
    this.setState({
        progressValue: Math.floor(this.audio.currentTime / this.audio.duration * 100)
     }))
 }, 100)

and tried manipulating the timeInterval of 100ms to a smaller number, which makes it closer but the delay still exists.

3 Questions:

1) What is causing this to happen?

2) Is there a way to fix this?

3) If the answer is 'no' to 2), is there another component I can use to display the progress of an audio file? (Not the default controls from audio tag).

Thank you!