Event.target.value is returning undefined

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 useEffect but I have a feeling I may be implementing it wrongly.

Update Found out that the event.target.value is returning an undefined which is why the state is not changing. Any ideas as to why it is returning an undefined?

Code

// Parent Component
  const [targetTimeS, setTargetTimeS] = React.useState(60);


 function handleMinuteSelectionChange(event) {
    const minuteSelection = event.target.value;

    if (isNaN(minuteSelection)) {
      window.alert("Please select a number");
    } else {
      const minuteSelectionS = parseInt(minuteSelection);
      if (minuteSelectionS > 59 || minuteSelectionS < 0) {
        window.alert("Please choose a minutes value between 0 and 59");
      } else {
        console.log(`Minute selection changed: ${minuteSelectionS}`);
        setTempTargetTimeS(minuteSelectionS * 60);
      }
    }
  }

  function timerWindow() {
    return (
      <TimerWindow
        handleTargetTimeCancelButtonClicked={
          handleTargetTimeCancelButtonClicked
        }
        handleMinuteSelectionChange={(e)=> handleMinuteSelectionChange(e)}
        handleTargetTimeDoneButtonClicked={handleTargetTimeDoneButtonClicked}
        value={targetTimeS / 60}
        openModal={showTargetTimeWindow}
        closeModal={hideTargetTimeWindow}
        handlePresetButtonClicked={handlePresetButtonClicked}
        handleHideTimerWindowClicked={hideTargetTimeWindow}
      />
    );
  }

Child Component
export default function TimerWindow(props: {
  handleTargetTimeDoneButtonClicked: (e) => void;
  handleTargetTimeCancelButtonClicked: (e) => void;
  handleMinuteSelectionChange: (e) => void;
  handlePresetButtonClicked?: (e: number) => void;
  handleHideTimerWindowClicked?: (e) => void;
  closeModal: (e) => void;
  openModal: boolean;
  value: number;
}): JSX.Element {
  const [targetTimeS, setTargetTimeS] = useState(60);

  useEffect(() => {
    setTargetTimeS(props.value);
    console.log(props.value);
  }, [targetTimeS]);

  const recorderClasses = speechRecorderStyles();

  return (
    <Modal open={props.openModal} onClose={props.closeModal}>
      <div className={recorderClasses.targetTimeWindow}>
        <CloseIcon
          onClick={props.handleHideTimerWindowClicked}
          className={recorderClasses.windowCloseButton}
        />
        <Typography className={recorderClasses.selectRecordingTime}>
          Select recording time
        </Typography>
        <Stack spacing={4} direction="column" alignItems="center" height="100%">
          <Stack spacing={4} direction="row">
            <TimerPresets onClick={props.handlePresetButtonClicked} />
          </Stack>
        </Stack>

        <TextField
          id="outlined-basic"
          label="Minutes"
          variant="outlined"
          className={recorderClasses.targetTimeSelection}
          value={targetTimeS}
          onChange={(e) => props.handleMinuteSelectionChange(e.target.value)}
          sx={{
            mt: 6,
            ml: 1,
          }}
          type="number"
        />
        <Stack spacing={4} direction="row">
          <Button
            className={recorderClasses.targetTimeCancelButton}
            onClick={props.handleTargetTimeCancelButtonClicked}
          >
            <Typography
              className={recorderClasses.targetTimeCancelButtonTypography}
            >
              Cancel
            </Typography>
          </Button>
          <Button
            className={recorderClasses.targetTimeDoneButton}
            onClick={props.handleTargetTimeDoneButtonClicked}
          >
            <Typography
              className={recorderClasses.targetTimeDoneButtonTypography}
            >
              Done
            </Typography>
          </Button>
        </Stack>
      </div>
    </Modal>
  );
}