MUI select - selected value not showing with a capital

Question

I have an mui select with a dropdown of menuItems. I have made the value with a capital letter but when choosing a value the outcome does not show the capital.

How can I change it?

    <FormControl size="small" sx={{ m: 1, minWidth: 150 }}>
      <FormHelperText className="text-black">Filter By: </FormHelperText>
      <Select
        className="border border-black text-black bg-white"
        value={filterBy}
        onChange={handleChangeFilter}
        displayEmpty
        inputProps={{ 'aria-label': 'Filter By: ' }}
        variant="outlined"
      >
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        <MenuItem value="Pending">Pending</MenuItem>
        <MenuItem value="Active">Active</MenuItem>
        <MenuItem value="Inactive">Inactive</MenuItem>
      </Select>
    </FormControl>

This is my dropdown - the values are capitalised but then on the web it shows as below

Answer 1

You can try like this,
sx={{ textTransform: "uppercase" }}