I hope someone will be able to help me with this problem.

I have a react datagrid table that has, as one of it's columns, a singleSelect type. The valueOptions for this column are taken from another .jsx file which returns a map, e.g. return [{"value": 'cat', "label": 'cat'}, {"value": 'dog', "label": 'dog'}];

The drop down within the column displays the values, however, when I select one of the value, say Cat 1, I get the following error:

"A component is changing the uncontrolled value state of Select to be controlled. Elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled Select element for the lifetime of the component. The nature of the state is determined during the first render. It's considered controlled if the value is not undefined."

The creation of the column is in 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',
        },
    ];

};

and the data comes from another file myData.jsx

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

I'm new to React, so if anyone can help with this problem then I'd be very greatful.

Many thanks in advance.