props.children is not working in my parent component, BoxCard. When I reference the child component directly instead of props.children, it works. Here's the code that's not working:

// 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;