i have a react select input using checkboxes and a list item text to denote selected values. When i use the ListItemText, the selected values get displayed as objects but when i just display the {option.title} in the menu item the actual text gets displayed. Is there another specific way i should display text in the ListItemText? Any advise will be appreciated.

Code :

{
      "id": 288,
      "category_id": 3,
      "title": "Test",
      "kpi_unit_of_measure": "%>",
      "updated_by": 9,
      "created_by": 9,
      "date_created": "2021-12-15T21:00:00.000+0000",
      "date_updated": "2022-01-09T21:00:00.000+0000",
      "user_id": 9,
      "account": "Revenue",
      "variance": "green",
      "target": "70",
      "actualYTD": "10",
      "plannedYTD": "10",
      "rootCause": null,
      "action": null,
      "supportRequired": null,
      "categories": {
          "id": 3,
          "description": "Talent and Culture"
      }
  }

When i use ListItemText, my selected values get displayed like an object : Image here error

Code :

{kpis && kpis.map((option) => (
    <MenuItem key={option.id} value={option.id}
              classes={{
              root: classes.selectMenuItem,
              selected: classes.selectMenuItemSelectedMultiple,
              }}>
              <ListItemIcon>
          <Checkbox checked={kpi_id.includes(option.id)} />
          </ListItemIcon>
          <ListItemText primary={option.title} title={option.title}> {option.title}</ListItemText> 
    </MenuItem>   
))}

But when i remove the checkbox i can view the title of the option , shouldi display the text in the ListItemText differently?

Image here : expected

Code :

{kpis && kpis.map((option) => (
    <MenuItem key={option.id} value={option.id}
              classes={{
              root: classes.selectMenuItem,
              selected: classes.selectMenuItemSelectedMultiple,
              }}>
              {option.title}
    </MenuItem>   
))}