Espero que alguien pueda ayudarme con este problema.

Tengo una tabla de cuadrícula de datos de reacción que tiene, como una de sus columnas, un tipo de selección única. Las opciones de valor para esta columna se toman de otro archivo .jsx que devuelve un mapa, por ejemplo, devuelve [{"valor": 'gato', "etiqueta": 'gato'}, {"valor": 'perro', "etiqueta" : 'perro'}];

El menú desplegable dentro de la columna muestra los valores, sin embargo, cuando selecciono uno de los valores, digamos Cat 1, aparece el siguiente error:

"Un componente está cambiando el estado de valor no controlado de Select para ser controlado. Los elementos no deben cambiar de no controlado a controlado (o viceversa). Decida entre usar un elemento Select controlado o no controlado durante la vida útil del componente. La naturaleza del estado se determina durante el primer renderizado. Se considera controlado si el valor no está undefined ".

La creación de la columna está en myExample.jsx:

 export default function myView() { const [data] = useState(getData()); const columns = [ { field: "name", headerName: "Name", width: 100, type: "text", editable: true, align: 'left', }, { field: "type", headerName: "Type", type: "singleSelect", width: 100, editable: true, valueOptions: data, align: 'left', }, ];

};

y los datos provienen de otro archivo myData.jsx

 export const getData = () => { return [{"value": 'cat', "label": 'cat'}, {"value": 'dog', "label": 'dog'}]; };

Soy nuevo en React, así que si alguien puede ayudarme con este problema, estaría muy agradecido.

Muchas gracias de antemano.