Passing data in callback function from Modal

I am new to wonderland of react and exploring using Mantine library.

I have a modal as below which has a child Component "StudentForm". I wish to take input from StudentForm and pass that value to ParentComponent.

ParentComonent:

  const modaltoblock = () => {
    console.log("Hit");
  }

  const openModal = () => modals.openConfirmModal({
    title: 'Input Data',
    children: (
        <StudentForm modaltoblock={modaltoblock}></StudentForm>
    ),
    labels: { confirm: 'Confirm', cancel: 'Cancel'},
    onCancel: () => console.log('Cancel'),
    
    onConfirm: () => (
      //handleIncrement(),
      notifications.show({
      title: 'Input Submitted',
      message: 'Trial Complete',
      autoClose: 1000,
      withCloseButton: true
    })),
  });

export default function StudentForm(props) {
  return (
      
      <Container> 
             
             <Title>Input Data for :  </Title>
             
             <Form onSubmit={props.modaltoblock()}>

                //input field
                </Form>
</Container>
);
}

How do I pass on data to ModaltoBlock function from StudentForm?

please use arrow functions

const StudentForm=({modaltoblock})=> {
  return (
      <Container> 
             <Title>Input Data for :  </Title>
             <Form onSubmit={modaltoblock('HI')}/>
      </Container>
 );
}
export default StudentForm;

so far we are sending the word 'HI'

then now we can get that value at the function as a parameter

const modaltoblock = (value) => {
    console.log("SEE HERE", value);
}