renderValue prop not working in MUI native Select

Question

When I set the the native prop in MUI Select component, the renderValue prop doesn't work. Also, if I try to pass a custom value to the value prop, it doesn't appear. Here is the code:

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>

I want the value that is shown to be ${label} - ${event.target.value} , but the Select component displays the value in the default way. How can I modify its standard behavior?

When there is no value, I want the renderValue prop to display the string Nothing . This doesn't work either.

Note: if I remove the native prop, it shows the value that I want, but it messes up the styling of the drop down menu items.

Answer 1

I believe renderValue expects a ReactNode. Changing your function to (value) => (value? <em>{value}</em>: <em>Nothing</em>) will return a renderable value.