The MUI Parent Component includes a Page, followed by a modal also from MUI. Inside the modal, I am rendering the DatePicker component.
// @mui
import { DatePicker } from '@mui/x-date-pickers';
This is how it appears on the screen.
<Controller
name="createDate"
control={control}
render={({ field, fieldState: { error } }) => (
<DatePicker
label="Date create"
value={field.value}
onChange={(newValue) => {
field.onChange(newValue);
}}
renderInput={(params) => <TextField {...params} fullWidth error={!!error} helperText={error?.message} />}
/>
)}
/>
The issue arises when the DatePicker ends up displaying beneath the modal. How can this be resolved?
I attempted to follow the solution provided in this question, but it did not resolve the problem. It seems that those solutions are not applicable to the MUI DatePicker. Any assistance in addressing this would be greatly appreciated. Thank you.