A solution has been found, so I want to share it for others so then don't have to send as much time searching for a solution as I did.

This is the example from the MUI website. This will display a comma-separated list using the value of your MenuItem, in the example above it would be the option.id as designated value={option.id}

renderValue={(selected) => selected.join(', ')} 

I needed to pass the ID back as a my value, rather than the name, so to be able to use something other than what is designated in the value prop, it required creating a filter and mapping through the options array which populate the dropdown to fetch the name.

This will allow you to use the option.name rather the value of option.id

renderValue={(selected) => {
    const selectedOption = options.filter((option) => 
    selected.includes(option.id)).map((option) => option.name);
    return selectedOption.join(', '); }
}
```