passing function with parameters as props to child component in react, the parameter is not working

Question

I am using functional components in react. React version 18.2.0. Parent components look like this:

const addNewActivity = async (newActivity) => {
      console.log(newActivity);
}

const ActivitiesPage = () => {
  return (
    <div className="activities_section">
      <div className="add-btn">
        <FormModal
          buttonText="+ Add"
          modalTitle="Enter activity here"
          modalText=""
          placeholder="Activity Name"
          submitHandler={() => addNewActivity}
        />
      </div>
    </div>
  );

Child component looks like:

<DialogActions>
     <Button onClick={props.submitHandler(formInput)}>OK</Button>
     <Button onClick={handleClose}>Cancel</Button>
</DialogActions>

The attribute formInput in the child component is a state variable inside child component which updates as the value inside a textfield in Dialogbox updates, by the function setFormInput.

  <TextField
    autoFocus
    margin="dense"
    id="activity-name_field"
    label={props.placeholder}
    type="text"
    fullWidth
    variant="standard"
    onChange={(e) => setFormInput(e.target.value)}
  />
</DialogContent>
<DialogActions>
  <Button onClick={props.submitHandler(formInput)}>OK</Button>
  <Button onClick={handleClose}>Cancel</Button>
</DialogActions>

I expect the submitHandler function to console.log the value of formiInput ie (input in the textfield), but I am getting event object as my output. I'd like to know what is wrong with my approach.

Thankyou for reading. Any suggestion would be appreciated.