Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(Select)`, expected a ReactNode - reactjs

Question

I'm trying to render certain inputs if a variable is true but when the component render displays the warning Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(Select)`, expected a ReactNode.
Here is the code of the Material-ui Dialog which receive some props, one of them is the one that I validate to show or not a pair of select inputs.
What I'm doing is validate if the variable is true, show them if not, don't show them.
states...
requests...
onSubmit...
return (
<Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
<Collapse in={open}>
<Alert severity={severity}>{alertMsg}</Alert>
</Collapse>
<DialogTitle>Proceso de factura.</DialogTitle>
<DialogContent>
<Container>
<TextField
autoFocus
margin="dense"
id="vus"
name="vus"
label="Valor unitario de servicio."
fullWidth
variant="outlined"
onChange={handleChange}
value={vus}
/>
<TextField
margin="dense"
id="discount"
name="discount"
label="Descuento"
fullWidth
variant="outlined"
onChange={handleChange}
value={discount}
/>
<TextField
margin="dense"
id="paymentMeth"
name="paymentMeth"
label="Método de pago"
fullWidth
variant="outlined"
onChange={handleChange}
value={paymentMeth}
/>
<TextField
margin="dense"
id="payment"
name="payment"
label="Forma de pago"
fullWidth
variant="outlined"
onChange={handleChange}
value={payment}
/>
{requiresCCP ? (
<>
<Box className={classes.formInputs}>
<FormControl fullWidth>
<InputLabel id="select-vehicle">
Vehículo
</InputLabel>
<Select
labelId="select-vehicle"
id="vehicleSelect"
name="vehicleSelect"
value={vehicle}
label="Vehículo"
onChange={handleChange}
>
{allVehicles.map((vehicle, index) => {
return (
<MenuItem
value={vehicle._id}
key={index}
>
{vehicle.PlateNumber} -{" "}
{vehicle.VehicleName} Modelo{" "}
{vehicle.Model}
</MenuItem>
);
})}
</Select>
</FormControl>
</Box>
<Box className={classes.formInputs}>
<FormControl fullWidth>
<InputLabel id="select-contact">
Contacto
</InputLabel>
<Select
labelId="select-contact"
id="contactSelect"
name="contactSelect"
value={contact}
label="Contacto"
onChange={handleChange}
>
value={contact}
onChange={handleChange}
{allContacts.map((contact, index) => {
return (
<MenuItem
value={contact._id}
key={index}
>
{contact.LastNameFather}{" "}
{contact.LastNameMother}{" "}
{contact.FirstName} -{" "}
{contact.OfficialNumber}
</MenuItem>
);
})}
</Select>
</FormControl>
</Box>
</>
) : (
""
)}
</Container>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancelar</Button>
<Button variant="contained" type="submit">
Completar viaje
</Button>
</DialogActions>
</Box>
);
};```

Answer 1

Children you are passing inside the sectect element is incorrect. Just remove value and onchange from its children as you are already passing them as props
<Select
labelId="select-contact"
id="contactSelect"
name="contactSelect"
value={contact}
label="Contacto"
onChange={handleChange}
>
{allContacts.map((contact, index) => {
return (
<MenuItem
value={contact._id}
key={index}
>
{contact.LastNameFather}{" "}
{contact.LastNameMother}{" "}
{contact.FirstName} -{" "}
{contact.OfficialNumber}
</MenuItem>
);
})}
</Select>

Answer 2

If you are working with dates and passing them down as {item.date}
then instead use {item.date.toLocaleDateString()} or {item.date.toString()}

Answer 3

{item.date.toLocaleDateString()} or {item.date.toString()} - This worked for me
<Select
labelId="select-contact"
id="contactSelect"
name="contactSelect"
value={contact}
label="Contacto"
onChange={handleChange}
{allContacts.map((contact, index) => {
return (
<MenuItem
value={contact._id}
key={index}
>
{contact.LastNameFather.toString()}{" "}
{contact.LastNameMother.toString()}{" "}
{contact.FirstName.toString()} -{" "}
{contact.OfficialNumber.toString()}
</MenuItem>
);
})}
Just add toString()