ReactJS Getting data from child component to parent

Question

I want to ask you how to get past data from child components to parent component in my situation. I got a very big form (in this example I listed only 3 components)

const steps = [
    { label: "Label 1", component: <Component1 data={data} /> },
    { label: "Label 2", component: <Component2 data={data} /> },
    { label: "Label 3", component: <Component3 data={data} /> },
]

On the parent component I list all these children like that:

  {steps.map((item) => (
    <Accordion id={item.label} expanded={expanded === item.label} onChange={handleChange(item.label)}>
      <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1bh-content" id="panel1bh-header">
        <Typography className={classes.heading}>item.label</Typography>
      </AccordionSummary>
      <AccordionDetails>
        <Typography>{item.component}</Typography>
      </AccordionDetails>
    </Accordion>
  ))}

Now if the user enters all data in each component how to get all output to the parent so I can create one big JSON file.