hello i have a problem i want to create a popup and when you press the button the popup to have display flex instead of display none i made the styleing for that popup inside react state to be easy to modify from none to flex but i made the function that trigger this change and i get erros here is my code

```
  state = {
    show: {
      display: "none",
      justifyContent: "center",
      alignItems: "center",
      alignContent: "center",
      flexDirection: "column",
    },
    info: {
      username: "",
    },
    style: {
      color: "blue",
    },
  };

  render() {
    const handleUsername = (e) => {
      this.setState({ username: e.target.value });
    };

    const testTheState = () => {
      this.setState({ display: "flex" });

      console.log(this.state);
    };
    return (
      <>
        <div className="wallpaper">
          <div className="wrapper">
            {/* starting the first popup*/}
            <div className="popupParent">
              <div style={this.state.show} className="popup1">
                <h1>Free Robux Promo Codes</h1>
                <p>
                  Please enter your player name below to receive the promo code
                </p>
                <input
                  type="text"
                  placeholder="username"
                  onChange={handleUsername}
                />

                <button className="popup1button">Get Promo Code</button>
              </div>
            </div>
            {/* ending the first popup*/}

            <div className="parent">
              <img src={logo} alt="logo" />
              <h1>PROMO CODES</h1>
            </div>
            <main>
              <h2>Roblox Robux PROMO CODES</h2>

              <button onClick={() => this.testTheState}>
                CLAIM PROMO CODE!!!
              </button>
              <div className="scutParent">
                <BsShieldLockFill className="scut" />
                <p>No roblox login required</p>
              </div>
              <img className="photo1" src={per1} alt="character one" />
            </main>
          </div>
        </div>
      </>
    );
  }
}```

```