How to submit and validate a form from outside component ReactJS - reactjs

Question

I have a multi-step component on which I would like to have a form in one of the steps, so when the user tries to go to the next step I could validate the input and submit the form. So far I have this code, but I haven't figured how to validate and submit the code from the outside button.
I would appreciate your help.
import CostumForm from './NannySignupComponents/InformacionPersonal';
const steps = ['Shipping address', 'Payment details', 'Review your order'];
const theme = createTheme();
export default function Checkout() {
function getStepContent(step) {
switch (step) {
case 0:
return (
<CostumForm/>
);
case 1:
return ;
case 2:
return ;
default:
throw new Error('Unknown step');
}
}
const [activeStep, setActiveStep] = useState(0);
const handleNext = () => {
setActiveStep(activeStep + 1);
this.setState({submitFromOutside: true})
};
const handleBack = () => {
setActiveStep(activeStep - 1);
};
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<AppBar
position="absolute"
color="default"
elevation={0}
sx={{
position: 'relative',
borderBottom: (t) => `1px solid ${t.palette.divider}`,
}}
>
<Toolbar>
<Typography variant="h6" color="inherit" noWrap>
Company name
</Typography>
</Toolbar>
</AppBar>
<Container component="main" maxWidth="sm" sx={{ mb: 4 }} >
<Paper variant="outlined" sx={{ my: { xs: 3, md: 6 }, p: { xs: 2, md: 3 } }}>
<Typography component="h1" variant="h4" align="center">
Checkout
</Typography>
<Stepper activeStep={activeStep} sx={{ pt: 3, pb: 5 }}>
{steps.map((label) => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
</Step>
))}
</Stepper>
<React.Fragment>
{activeStep === steps.length ? (
<React.Fragment>
<Typography variant="h5" gutterBottom>
Thank you for your order.
</Typography>
<Typography variant="subtitle1">
Your order number is #2001539. We have emailed your order
confirmation, and will send you an update when your order has
shipped.
</Typography>
</React.Fragment>
) : (
<React.Fragment>
{getStepContent(activeStep)}
<Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
{activeStep !== 0 && (
<Button onClick={handleBack} sx={{ mt: 3, ml: 1 }} >
Back
</Button>
)}
<Button
variant="contained"
onClick={handleNext}
sx={{ mt: 3, ml: 1 }}
>
{activeStep === steps.length - 1 ? 'Place order' : 'Next'}
</Button>
</Box>
</React.Fragment>
)}
</React.Fragment>
</Paper>
</Container>
</ThemeProvider>
);
}