How can communicate between my generic modalform and my form in reactjs to validate the form?

Question

I add reactjs component in my existing project

I create a generic modalform and generic forminput component with material-ui. I create 3 differents form for my page. I will show u one of them.

const FormBrand = () => {
    const brands = ReactRedux.useSelector((state) => state.brands.brands )    

    return (
        <FormInput isRequired={true} isUnique={true} label={'Brand'} id={'gestionnaire-brand'} listToCheck={brands} fieldInListToCheck={'Brand'} />
    )
}


const FormInput = ({ isRequired, label, id, listToCheck, fieldInListToCheck}) => {
    const [errorInput, setErrorInput] = React.useState('')
    const [input, setInput] = React.useState('')

    const checkText = (e) => {
        const value = validator.ltrim(e.target.value)
        const exist = listToCheck != null ? listToCheck.filter(item => item[fieldInListToCheck].toLowerCase() == validator.rtrim(value.toLowerCase())) : [];

        if (isRequired && value == '') {
            setErrorInput('pls add a value')
        }
        else if (isUnique && exist.length > 0) {
            setErrorInput(value + ' already exist')
        }
        else {
            setErrorInput('')
        }

        setInput(value)
    }

    return (
        <MaterialUI.FormControl fullWidth variant="standard" sx={{ mb: 1}}>
            <MaterialUI.InputLabel htmlFor={ id } sx={{ fontSize: 15 }}>{ label }</MaterialUI.InputLabel>
            <MaterialUI.Input sx={{ fontSize: 15 }}
                id={ id }
                type='text'
                margin="normal"
                error={errorInput != ''}
                value={input}
                onChange={(e) => checkText(e)}
            />
            <MaterialUI.FormHelperText error={errorInput != ''}>{errorInput}</MaterialUI.FormHelperText>
        </MaterialUI.FormControl>
    )
}
const ModalForm = ({ title, onsubmit, children }) => {
    const dispatch = ReactRedux.useDispatch()
    const openned = ReactRedux.useSelector((state) => state.modalForm.modalForm)

    const handleClose = () => dispatch(toggleModalForm())
    
    return (
        <Dialog fullWidth={true} maxWidth='sm' open={openned} onClose={handleClose} aria-labelledby="parent-modal-title" aria-describedby="parent-modal-description">
            <DialogTitle id="modal-modal-title" sx={{ mb: 0 }} variant="h4" component="h2">{title}</DialogTitle>
            <DialogContent id="modal-modal-description" sx={{ fontSize: 13 }}>
                <form onSubmit={ onsubmit }>
                    {children}
                    <br /><br />
                    <DialogContentText>
                        <Button onClick={handleClose} sx={{ fontSize: 11 , mr : 1 }} variant="outlined">Cancel</Button>
                        <Button type="submit" variant="contained" sx={{ fontSize: 11 }} color="primary">Submit</Button>
                    </DialogContentText>
                </form>
            </DialogContent>
        </Dialog>
    );
}

const Ref = () => {
    const dispatch = ReactRedux.useDispatch()
    const [modalTitle, setModalTitle] = React.useState('') 
    const [modalContent, setModalContent] = React.useState(null) 

    const openFormModal = (e, modalTitle, modalContent) => {
        e.preventDefault()
        dispatch(toggleModalForm())

        if (modalContent == 1) {
            setModalContent(<FormStock key={modalContent} />)
        } else if (modalContent == 2) {
            setModalContent(<FormCategorie key={modalContent} />)
        } else if (modalContent == 3) {
            setModalContent(<FormBrand key={modalContent} />)
        }

        setModalTitle(modalTitle)
    }

    const submitFormModal = (e) => {
        e.preventDefault()
        dispatch(toggleModalForm())
    }

    return (   
        <React.StrictMode>
           <div>
               <PageTitle text='Refs'><Button text='Add Brand' onclick={(e) => openFormModal(e,"Add Brand",3)}/></PageTitle>
               <ModalForm title={modalTitle} onsubmit={(e) => submitFormModal(e) }>
                   {modalContent}
               </ModalForm>
           </div>
       </React.StrictMode>
        
    )
}

So FormBrand and the other form created will have specific input or selector.

ModalForm have the cancel, submit button and the form tag.

Ref have modal have the submit function.

My issue is I don't know how to communicate properly to validate the differents inputs in my submit function.