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