Select renderValue function not being called [ReactJS/Material-UI]

Question

I have a select function within a material-table (a module which I installed). I am also using the Chips component from Material-UI. However, in this function I have tried troubleshooting why nothing appears when I select something and it seems that my renderValue function is not being called.

Here is the code:

function handleChange(event) {
    console.log("!")
    setRoleIds(event.target.value);
  }

  const renderChip = (value) => {
    console.log("?!??!?");
    console.log(value);
    return <Chip label={value} className={classes.chip} />;
  };

  const [cassowaries, setCassowaries] = React.useState({
    columns: [
      { title: "Cassowary Name", field: "name" },
      {
        title: "Cassowary Roles",
        field: "roles",
        render: (rowData) => {
          return (
            <li>
              {rowData.roles.map((role) => (
                <Chip label={role} className={classes.chip} />
              ))}
            </li>
          );
        },
        editComponent: (props) => (
          <FormControl className={classes.formControl}>
            <InputLabel>Roles</InputLabel>
            <Select
              multiple
              value={roleIds}
              onChange={handleChange}
              input={<Input id="select-multiple-chip" />}
              renderValue={renderChip}
              // MenuProps={MenuProps}
            >
              {allRoleIds.map((id) => (
                <MenuItem key={id} value={id}>
                  {id}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
        ),
      },
      { title: "Penguin", field: "penguin" },
    ],
    data: [{ name: "Mehmet", roles: roleIds, penguin: true }],
  });

Would someone be able to help or guide me please?

Answer 1

Make sure you have the following properties set:

<Select
native={false}
displayEmpty={true}
...
</Select>

You have to set displayEmpty={true} to make it to render if the value is empty and native={false} because renderValue() works only for non native selects according to the docs.