A component is changing a controlled input to be uncontrolled

Question

I made a more basic version of wordle which gives me a warning every time I type in the text box

const Wordleinput = (props) => {
  var targetWordString = "DOGS"

  const handleUserInput = (e) => {
    props.setInputValue(e.target.value.toUpperCase())
  };


  const handleKeyPress = (e) => {
    props.setReset(false)
    if (e.key === "Enter"){
      if(e.target.value.length === 0){
        alert("Put something in there first")
      }
      else {
        e.target.disabled = true
        props.setInputValue('')
        if(e.target.value !== targetWordString){
          props.setIteration(props.iteration + 1)
        }
        else {
          props.declareWin(true)
        }
    }
  }    
  }
  return (
    <div>
      {props.winShown === false && props.id === props.iteration ? <FormControl
      placeholder="4 letter word"
      
      maxLength="4"
      className="w-25"
      value={props.inputValue}
      onChange={handleUserInput} 
      onKeyPress={handleKeyPress}
      />
      : props.resetBtn ?
     <FormControl
      disabled
      value=""
      maxLength="4"
      className="w-25"/>
      : <FormControl
      disabled
      maxLength="4"
      className="w-25"/>
    }
    </div>
  )
}

Every time I type it displays this

Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

Changing the value of the second if in the ternary operator to defaultValue={''} delays the warnings until I hit enter

The useState hooks are declared in the parent component and passed through as props

  const [winShown, setWinShown] = useState(false) 
  const[iteration, setIteration] = useState(1)
  const [inputValue, setInputValue] = useState("");
  const [reset, setReset] = useState(true)