Cannot read property 'lastIndexOf' of null error when trying to upload a gltf file using react threejs

I am trying to upload a gltf file in reactjs and show it.But i am getting this error in the load function:

TypeError: Cannot read property 'lastIndexOf' of null

this is for the input file:

<input id="files" type="file"  onChange={this.handleGltf} type="file"/>

This is the onchange fuction where i load the gltf file with three.js:

  handleGltf(event) {
        if (event.target.files[0]) {
            this.setState({
                file: URL.createObjectURL(event.target.files[0])
            })
        }

I get the error from this gltf loader inside the onchange function:

this.loader.load(this.state.file,   gltf => {

                console.log(this.state.file)
                this.gltf = gltf.scene
                console.log("check5")

                // ADD MODEL TO THE SCENE
                this.scene.add(gltf.scene);
    
                this.control.attach( gltf.scene );
                this.scene.add( this.control );

                //
                gltf.scene.scale.set(3, 3, 3)
                this.orbit.update();

                this.renderer.render(this.scene, this.camera);
            }, undefined,

            error => {
                console.log(error);
            });

How can i resolve this issue?