title: Event.target.value is returning undefined
body: <p>I am trying to create a timer window and I have created a seperate component for that. I am trying to pass the time in from the main component into the child component. The issue is the state for the timer input box is not changing. I have tried using <code>useEffect</code> but I have a feeling I may be implementing it wrongly.</p>
  <p>Update
  Found out that the <code>event.target.value</code> is returning an undefined which is why the state is not changing. Any ideas as to why it is returning an undefined?</p>
  <p>Code</p>
  <pre><code>// Parent Component
    const [targetTimeS, setTargetTimeS] = React.useState(60);
  
  
   function handleMinuteSelectionChange(event) {
      const minuteSelection = event.target.value;
  
      if (isNaN(minuteSelection)) {
        window.alert(&quot;Please select a number&quot;);
      } else {
        const minuteSelectionS = parseInt(minuteSelection);
        if (minuteSelectionS &gt; 59 || minuteSelectionS &lt; 0) {
          window.alert(&quot;Please choose a minutes value between 0 and 59&quot;);
        } else {
          console.log(`Minute selection changed: ${minuteSelectionS}`);
          setTempTargetTimeS(minuteSelectionS * 60);
        }
      }
    }
  
    function timerWindow() {
      return (
        &lt;TimerWindow
          handleTargetTimeCancelButtonClicked={
            handleTargetTimeCancelButtonClicked
          }
          handleMinuteSelectionChange={(e)=&gt; handleMinuteSelectionChange(e)}
          handleTargetTimeDoneButtonClicked={handleTargetTimeDoneButtonClicked}
          value={targetTimeS / 60}
          openModal={showTargetTimeWindow}
          closeModal={hideTargetTimeWindow}
          handlePresetButtonClicked={handlePresetButtonClicked}
          handleHideTimerWindowClicked={hideTargetTimeWindow}
        /&gt;
      );
    }
  </code></pre>
  <pre><code>Child Component
  export default function TimerWindow(props: {
    handleTargetTimeDoneButtonClicked: (e) =&gt; void;
    handleTargetTimeCancelButtonClicked: (e) =&gt; void;
    handleMinuteSelectionChange: (e) =&gt; void;
    handlePresetButtonClicked?: (e: number) =&gt; void;
    handleHideTimerWindowClicked?: (e) =&gt; void;
    closeModal: (e) =&gt; void;
    openModal: boolean;
    value: number;
  }): JSX.Element {
    const [targetTimeS, setTargetTimeS] = useState(60);
  
    useEffect(() =&gt; {
      setTargetTimeS(props.value);
      console.log(props.value);
    }, [targetTimeS]);
  
    const recorderClasses = speechRecorderStyles();
  
    return (
      &lt;Modal open={props.openModal} onClose={props.closeModal}&gt;
        &lt;div className={recorderClasses.targetTimeWindow}&gt;
          &lt;CloseIcon
            onClick={props.handleHideTimerWindowClicked}
            className={recorderClasses.windowCloseButton}
          /&gt;
          &lt;Typography className={recorderClasses.selectRecordingTime}&gt;
            Select recording time
          &lt;/Typography&gt;
          &lt;Stack spacing={4} direction=&quot;column&quot; alignItems=&quot;center&quot; height=&quot;100%&quot;&gt;
            &lt;Stack spacing={4} direction=&quot;row&quot;&gt;
              &lt;TimerPresets onClick={props.handlePresetButtonClicked} /&gt;
            &lt;/Stack&gt;
          &lt;/Stack&gt;
  
          &lt;TextField
            id=&quot;outlined-basic&quot;
            label=&quot;Minutes&quot;
            variant=&quot;outlined&quot;
            className={recorderClasses.targetTimeSelection}
            value={targetTimeS}
            onChange={(e) =&gt; props.handleMinuteSelectionChange(e.target.value)}
            sx={{
              mt: 6,
              ml: 1,
            }}
            type=&quot;number&quot;
          /&gt;
          &lt;Stack spacing={4} direction=&quot;row&quot;&gt;
            &lt;Button
              className={recorderClasses.targetTimeCancelButton}
              onClick={props.handleTargetTimeCancelButtonClicked}
            &gt;
              &lt;Typography
                className={recorderClasses.targetTimeCancelButtonTypography}
              &gt;
                Cancel
              &lt;/Typography&gt;
            &lt;/Button&gt;
            &lt;Button
              className={recorderClasses.targetTimeDoneButton}
              onClick={props.handleTargetTimeDoneButtonClicked}
            &gt;
              &lt;Typography
                className={recorderClasses.targetTimeDoneButtonTypography}
              &gt;
                Done
              &lt;/Typography&gt;
            &lt;/Button&gt;
          &lt;/Stack&gt;
        &lt;/div&gt;
      &lt;/Modal&gt;
    );
  }
  
  
  </code></pre>