text won't show up on text input

Question

I finished creating a text field where a person would type their email and would receive an error when the field is empty and I decided to test it out. But when I tried typing in the textbox, nothing showed up in it. instead, this black border shows up around the input field when I click it.

I found similar problems on Stackoverflow other people had but some of the answers there didn't help such as adding a z-index: 1000 on my input CSS or removing the border-box or paddings. I even tried moving the send button, thinking it was somehow blocking the text field but that didn't work as well

here's the code in question

Javascript code

constructor(props) {
    super(props);
    this.state = {
      input: "",
    };
  }
  onSubmit = (event) => {
    event.preventDefault()
     if (this.state.input.length != 1) {
       return document.getElementById('error').innerHTML="No email found"
     }
  }
  render() {
    return(
      <section className = "image-banner">                   
          <div className = "text-1">
              COMING SOON
          </div>
          <div className = "text-2">
              The Dessa MiniPhone 2 
          </div>
          <div className = "text-3">
              Type your Email below to recieve further updates
          </div>
          <input value = {this.state.input} />
          <button onClick= {this.onSubmit}>Send</button>
          <p id="error"></p>
        <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"></link>
      </section>
      
    )
  }

CSS code

input {
  position: relative;
  left: 44vh;
  padding-right: 30vh;
  line-height: 20px;
  border-radius: 19px;
  border-width: 1px;
  top: 3vh;
  z-index: 1 1000;
}

button {
  position: relative;
  left: 38vh;
  border-radius: 0vh 7vh 7vh 0;
  color: black;
  line-height: 20px;
  border-width: 1px;
  top: 3vh;
}

Answer 1

You are setting your input value with your state ( state.input ) as controlled input and you not setting an onChange method, so your input always will be an empty string.

Answer 2

You have to add the onChange handler to the input element and update the state as the user types.

<input value = {this.state.input} onChange={(e) => this.setState({ input: e.target.value })} />