Using the particles in the background eliminates website's functionality for me

[TheOnlyArtz]

    return (
      <div className="App">
        <Particles style={{
          position: "absolute",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%"
        }}
        params={{
	       "particles": {
	        "number": {
	            "value": 50
	        },
	        "size": {
	            "value": 3
	        }
	    },
	       "interactivity": {
	        "events": {
	            "onhover": {
	                "enable": true,
	                "mode": "repulse"
	            }
	        }
	    }
	     }}/>
        <div className="mt-20">
          <h1 className="text-3xl text-white text-center">Welcome to the attack-pattern wiki!</h1>
        </div>
        <div className="mt-8">
          <div className="container mx-auto px-10">
            <form>
              <input className="bg-gray-200 appearance-none border-2 border-gray-200 rounded-full w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-attack-pattern" type="text" placeholder="Query here..." onChange={this.handleFormChange}></input>
            </form>
          </div>
        </div>
        <div className="mt-8 mx-auto container px-10">
          <div className="grid grid-cols-1 gap-6">
            {'error' in this.state.apiResponse ? (<ApiConnectionError/>) : (t)}
          </div>
        </div>
      </div>
    )

This is the code I'm using.

The result looks like:

but I can't use anything, can't press any of the buttons nor using the query form, what can cause that?

[JakeCooper]

Did you figure out what this was? I can't seem to highlight text or do anything....

[TheOnlyArtz]

Did you figure out what this was? I can't seem to highlight text or do anything....

If I remember correctly, I've passed the style that I've originally used on the Particles to the doc which wraps the whole page besides the Particles