Using WaveSurfer.js v2 in React Component(I think there's a bug?)

Question

I'm trying to use WaveSurfer.js(version 2) with React. I know that for version 1 there was a library called react-wavesurfer, but I really want to do it with v2. I'm already experienced with it, without React. So, I just made a component of mine.

As you can see in the code below, it all works perfectly, the WaveSurfer object is generated correctly in the componentDidMount() but then, all of sudden, in the load() method, there's an error I can't understand correctly.

This error is throwed after the load(), and after the error, it's logged in console "There it happens!" and the wave property of the state, as it should be.

This is the error in question and by itself it doesn't mean nothing. That's just an error without stack trace in a obfuscated function in react-error-overlay. The second error, DOMException, is directly caused by the first, and they everytime are throwed together.

This is the row of the react-error-overlay that causes the error directly, in /node_modules/react-error-overlay/index.js:1582, but it's obfuscated.

// ... various imports

class Track extends Component {
    wavref = null;

    constructor(props) {
        super(props);

        let id = this.props.id;

        this.state = {
            id: id,
            wave: null
        };
    }

    load() {
        console.log(this.state.wave, this.props.audio); // this.props.audio is the correct path, and should work correctly: "../../demo.wav".
        this.state.wave.load(this.props.audio);
        console.log("There it happens!", this.state.wave);
    }

    componentDidMount() {
        let generatedWave = WaveSurfer.create({
            container: ReactDOM.findDOMNode(this.waveref),
            waveColor: this.state.color,
            progressColor: this.state.progressColor,
            plugins: [
                RegionsPlugin.create({
                    dragSelection: {
                        slop: 5
                    }
                }),
                CursorPlugin.create({})
            ]
        });

        this.setState({
            wave: generatedWave,
        }, function() {
            this.load();
        });
    }

    render() {
        return(
            <div ref={(waveref) => this.waveref = waveref}></div>
        );
    }
}

export default Track;

Obviously, the load() method doesn't load/render the actual wave in the WaveSurfer canvas, and throws that error. I can't understand why, because it should just work normally and render the wave in the WaveSurfer canvas.

Does anyone of you know what can the error be?