reactjs - MUI Datagrid singleSelect dropdown showing blank when no matching value in list - Stack Overflow

Using MUI X Datagrid (v7.10.0) in a a Reactjs app.

I have a 'singleSelect' (dropdown) column type but it is showing blank when there is no matching value in the dropdown list (circled in red in the screenshot).

So basically i want to show the value from underlying datasource when in 'view' mode.

Column definition:

field: 'Code',
headerName: 'Code',
width: 200,
editable: true,            
type: 'singleSelect',             
valueOptions: Materials
}

Materials state for the singleSelect options:

const [Materials, setMaterials] = useState([])

Sample extract from above Materials array:

[{
label:"A/ACAS24/PPT",
value:"A/ACAS24/PPT"
},
{
label:"W/CONSLTOD17/PW",
value:"W/CONSLTOD17/PW
etc..etc..
]

Note, both label and value are using the same field.

I have tried using getOptionValue and getOptionLabel in the column definition which just made every row blank!