Flex down nested objects within a list of lists

I am looping over data from a rest call. Looking for a way to be able to flex
data within its own section without squeezing together or flowing into the next block.
Please refer to images below for illustration.

This is what I currently have which produces the output in the first image below.
Conduit and Selector are components and I do not have access to modify those.

<div>
    (
    <Conduit
        data={{
        // this mapping is the overall consisting of all squares in each rows 
        // This body takes in a list of lists
        body: Object.keys(restData).map((key) => {

            const sampleArray = restData[key];
            
            
            // this portion is squares per row (sometimes 3, sometimes more or less)
            return sampleArray.map(sample => ({
            content:
                // This div portion forms each square in image below
                <div style={{maxWidth: 300}}>
                    <Selector name={sample.name}/>
                </div>
            }));
            
            
        }),
        }}
    />
    )}
</div>

I am trying to control following portion to be able to flex it down if there is more than 3 items in a row.
Attempt was to place a div around this portion and flex it as follows but I end up with following error.

Current error with my attempt below.

Error!row.map is not a function

Is there a way around this? Please refer to image below to see what I am trying to achieve.

Current Attempt

return <div style={{display: 'flex', flexWrap: 'wrap', alignContent: 'flex-start'}}> {
    // this portion is squares per row (sometimes 3 sometimes more)
    sampleArray.map(sample => ({
    content:
    // This div portion forms each square in image below
        <div style={{maxWidth: 300}}>
            <Selector name={sample.name}/>
        </div>
    }))
} </div>;

This is the restData structure

{
    "key1": [
        {
            "name": "name1"
        },
        {
            "name": "name2"
        },
        {
            "name": "name3"
        },
        {
            "name": "name4"
        },
    ],
    "key1": [
        {
            "name": "name5"
        },
        {
            "name": "name6"
        },
        {
            "name": "name7"
        },
        {
            "name": "name8"
        },
    ]
}

This is the current output.

This is what I am trying to achieve.
The background colours are just there to show that when I flex down it still stays within same list.