Based on the code that you have provided, it seems that you are not setting your state to anything on change. A good practice would be to establish a handler, that will be triggered when the input's value has been changed - this will set the respective value to your state.

Additionally, since you are effectively making this a controlled input, I would recommend adding the state value as its value attribute. This way, you can handle it directly through the state (say if you wanted to have it reset).

const YourComponent = () => {
 const [name,setName] = useState("");
    
 const nameChangeHandler = (e) => {
    setName(e.target.value)
 };

 return (
 <div className="App">
    <div class="inputfield">
      <label>Campaign Name</label>
      <input type='text' required maxLength='20' onChange={nameChangeHandler} value={name} className="input"/>
   </div> 
 </div>  
};

For more information, you can also check the official documentation.

Here is an example of how I set state for input values.

Make sure to set this outside the component (before defining the component).

let initialValues = {
  city: ''
}

const [quote, setQuote] = useState(initialValues)

<input type="text"
  value={ quote.city || "" }
  name="city"
  onChange={ onChange } />

const onChange = (e) => {
  setQuote({...quote, [e.target.name]: e.target.value});
};

you can have as many key values inside the initialValues const. Make sure you define the name of the input along with the value pointing to the state object and an onChange event that handles the setting. Happy Coding!

To make a simple change with the code that you have, you can simply rewrite the onChange method for the input element.

onChange={(e) => setName(e.target.value)}