React: как получить значения из компонентов TextField Material-UI

У меня есть небольшое приложение с компонентом Form, компонентом SubmitButton и моим родительским компонентом (App.js). Когда пользователь нажимает кнопку отправки, я хочу получить значения трех полей в моем компоненте формы и передать их моему компоненту App.js. Я не уверен, как инициировать событие, используя onClick() или что-то подобное, чтобы получить значения поля формы из моей формы, а затем передать их через props в компонент App.js и console.info() их. Может ли кто-нибудь дать некоторые рекомендации, поскольку я очень новичок в React?

App.js

import React from 'react';
import NavBar from './Components/NavBar'
import Form from './Components/InfoForm'
import SubmitButton from './Components/SubmitButton';
import Container from '@material-ui/core/Container';
import Checkbox from './Components/Checkbox';
import './App.css';

function App() {

  const [state, setState] = React.useState({
    checkbox: false,
});

const handleChangeEvent = event => {
  setState({ ...state, [event.target.name]: event.target.checked });
};

  return (
   <div>
     <Container maxWidth = "md">
     <NavBar />             
     <Form />
     <Checkbox name = "checkbox" onChange = {handleChangeEvent} checked = {state.checkbox} />
     <SubmitButton isEnabled = {state.checkbox} onClick = {} /> 
     </Container>     
   </div>
  );
}

export default App;

InfoForm.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import MenuItem from '@material-ui/core/MenuItem';
import TextField from '@material-ui/core/TextField';

function Form() {
  const classes = useStyles();
  const [values, setValues] = React.useState({
    name: '',
    email: '',
    months: ''
  });

  const handleChangeEvent = name => event => {
    setValues({ ...values, [name]: event.target.value });
  };

  return (

    <form className = {classes.container} noValidate autoComplete = "off">
      <TextField
        id = "outlined-name"
        label = "Name"
        className = {classes.textField}
        value = {values.name}
        onChange = {handleChangeEvent('name')}
        margin = "normal"
        variant = "outlined"
      />

      <TextField
        id = "outlined-email-input"
        label = "Email"
        className = {classes.textField}
        value = {values.email}
        type = "email"
        name = "email"
        autoComplete = "email"
        margin = "normal"
        variant = "outlined"
      />      

      <TextField
        id = "outlined-select-months"
        select
        label = "Select"
        className = {classes.textField}
        value = {values.months}
        onChange = {handleChangeEvent('months')}
        SelectProps = {{
          MenuProps: {
            className: classes.menu,
          },
        }}
        helperText = "Month looking to book"
        margin = "normal"
        variant = "outlined"
      >
        {months.map(option => (
          <MenuItem key = {option.value} value = {option.value}>
            {option.label}
          </MenuItem>
        ))}
      </TextField>
    </form>
  );
}

export default Form;

SubmitButton.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';


export default function ContainedButtons(props) {

    return (
      <div>
        <Button variant = "contained" color = "primary" className = {classes.button} disabled = {!props.isEnabled} type = "submit">
          Submit
        </Button>
      </div>
    );
}