Cuando configuro el accesorio native en el componente MUI Select , el accesorio renderValue no funciona. Además, si trato de pasar un valor personalizado a la propiedad de value , no aparece. Aquí está el código:

 const [selectValue, setSelectValue] = useState(null); const handleTargetDataChange = (event) => { const { value, selectedIndex} = event.target; const label = options[selectedIndex].parentElement.getAttribute("label"); setSelectValue(`${label} - ${event.target.value}`); } <FormControl> <Select native id="export-to-select" sx={{ borderRadius: "0px" }} inputProps={{ sx: { padding: "0.5rem" } }} value={selectValue} onChange={handleTargetDataChange} renderValue={(value) => (value ? value : <em>Nothing</em>)} IconComponent={CustomSelectIcon} displayEmpty > <option aria-label="None">Select target</option> {targetData.map( (target) => ( <optgroup label={target.name}> {target.platforms.map((platform) => ( <option value={platform.name}>{platform.name}</option> ))} </optgroup> ) )} </Select> </FormControl>

Quiero que el valor que se muestra sea ${label} - ${event.target.value} , pero el componente Select muestra el valor de forma predeterminada. ¿Cómo puedo modificar su comportamiento estándar?

Cuando no hay ningún valor, quiero que la propiedad renderValue muestre la cadena Nothing . Esto tampoco funciona.

Nota: si elimino el accesorio native , muestra el valor que quiero, pero estropea el formato de los elementos del menú desplegable.