Adding ", " after each item in a list using React Bootstrap Table

Question

I am having problems properly displaying a list of items that is returned from the API using the react-bootstrap-table library.

The returned json is structured like this:

[{"name":"Client1","list_of_items":["item1","item2","item3","item4","item5"]}]

When it is displayed the "list_of_items" are all run together like one big string (ex: item1item2item3item4item5).

Is there a way to add a comma and space between each item?

This is what my code looks like right now in the App.js file:

import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import BootstrapTable from 'react-bootstrap-table-next';

export const App = () => {
    const clients = [
        {
            name: 'Client1',
            list_of_items: ['item1', 'item2', 'item3', 'item4', 'item5']
        },
        {
            name: 'Client2',
            list_of_items: ['item1', 'item2', 'item3', 'item4', 'item5']
        },
        {
            name: 'Client3',
            list_of_items: ['item1', 'item2', 'item3', 'item4', 'item5']
        }];
    const columns = [{
        dataField: 'name',
        text: 'Client'
    }, {
        dataField: 'list_of_items',
        text: 'List of Items'
    }];

return (
    <div>
        <BootstrapTable
            striped
            hover
            keyField='name'
            data={clients}
            columns={columns}/>
    </div>
);
}