props.children no funciona en mi componente principal, BoxCard. Cuando hago referencia al componente secundario directamente en lugar de a props.children, funciona. Aquí está el código que no funciona:

 // AddUserForm.js function AddUserForm(props) { function handleSubmit(event) { event.preventDefault(); } return ( <BoxCard> <Box component="form" onSubmit={handleSubmit}> <TextField required id="name" label="Name" variant="filled" /> <TextField required type="number" id="age" label="Age" variant="filled" InputLabelProps={{ shrink: true }} InputProps={{inputProps: { min: 0, step: 1 }}}/> <Button type="submit" variant="contained" startIcon={<FontAwesomeIcon icon={solid('circle-plus')}/>}>Add User</Button> </Box> </BoxCard> ) } export default AddUserForm; // BoxCard.js function BoxCard(props) { return ( <Box sx={{ minWidth: 275 }}> <Card variant="outlined"> <CardContent> {props.children} </CardContent> </Card> </Box> ) } export default BoxCard;