Introduce a div between a loop to add flex

This is what I currently have which displays fine.
I end up with 4 rows and 4 columns.

<div>
{(
    <Table
    data={{
        body: Object.keys(conduitData).map((key) => {
        const conduitArray = conduitData[key];
        return conduitArray.map(category => ({
            content:
            <div>
                <ConduitSelector
                data={{title: category.name}}
                />
            </div>
        }));
        }),
    }}
    />
)}
</div>

But the CSS does not wrap and the content keeps squeezing into the same row.
I want it to flex down if there is more than 3 items in a row.

I want to be able to wrap each row into another div so that I could introduce flex css properties as follows:

conduitData is a map.
conduitArray is an array.

<div>
{(
    <Table
    data={{
        body: Object.keys(conduitData).map((key) => {
        const conduitArray = conduitData[key];
        
        // (parent) I want to add this div to introduce css flex 
        return <div style={{display: 'flex'}}>
            {conduitArray.map(category => ({
            content:
            // adding flex properties here too
            <div style={{flex: '0 0 33.333333%'}}>
                <ConduitSelector
                data={{title: category.name,}}
                />
            </div>,
        }))}
        </div>
        }),
    }}
    />
)}
</div>

But when I run this, I end up with the following error.

Error!row.map is not a function

Is there a way I could overcome this error?