Make each value of MUI autocomplete sit on a new line

Question

I have a multi-select MUI Autocomplete component, and would like the selected options to sit on its own individual line to improve readability, but not sure how to go about it. It currently looks like this:

So for greater clarity, I would like the first value to display like "South Africa" and then the next value would be on the next line like "Portugal"

Answer 1

You can use the renderTags prop to completely control how the tags that are rendered.

Rudimentary CodeSandbox Link