Javascript 向下调整列表列表中的嵌套对象

我正在循环一个rest调用中的数据。寻找一种能够灵活变通的方法
数据在其自己的部分中，不会挤压在一起或流入下一个块。
请参考下面的图片进行说明

这是我目前所拥有的，它在下面的第一幅图中产生了输出。
导管和选择器是组件，我无权修改它们

<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>

有办法解决这个问题吗？请参考下面的图片，看看我正在努力实现什么

当前尝试

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>;

这是电流输出

这就是我想要达到的目标。
背景色只是为了表明，当我向下弯曲时，它仍然保持在同一列表中

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>;

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