Me gustaría completar dinámicamente las opciones de un componente Select (hecho con Material UI), que depende del valor de otro componente Select . Creé un componente personalizado que puedo reutilizar con Formik, y se ve así:

 const FormSelect = ({ name, data, ...otherProps }) => { // Get values for formik const { setFieldValue } = useFormikContext(); const [field, meta] = useField(name); const handleChange = (event) => { const { value } = event.target; // Update formik state setFieldValue(name, value); }; const config = { ...field, ...otherProps, select: true, variant: "outlined", fullWidth: true, onChange: handleChange, }; // Error handling if (meta && meta.touched && meta.error) { config.error = true; config.helperText = meta.error; } return ( <TextField {...config}> {data.map((item, index) => ( <MenuItem key={index} value={item}> {item} </MenuItem> ))} </TextField> ); };

Aquí está mi formulario -

 import * as React from "react"; import { Formik, Form } from "formik"; import { Grid, Typography } from "@mui/material"; import FormTextField from "./FormComponents/FormTextField"; import FormSelect from "./FormComponents/FormSelect"; <Form> <Grid container spacing={2}> <Grid item xs={12}> <Typography>Basic Information</Typography> </Grid> <Grid item xs={6}> <FormSelect name="sourceDatabase" label="Source Database" data={migrations} /> </Grid> <Grid item xs={6}> <FormSelect name="targetDatabase" label="Target Database" data={migrations} disabled={true} /> </Grid> ...

Me gustaría usar el valor actual del componente sourceDatabase para completar qué opciones mostrar en el componente targetDatabase , que son ambos componentes Select. También me gustaría deshabilitar el componente targetDatabase si no se selecciona ningún valor para sourceDatabase . ¿Cómo puedo lograr esta funcionalidad? ¡Gracias!