How to break a flex into new row for dynamic data [closed]

I am working on a video calling application using reactjs. LocalTile component contains video of local user and RemoteTiles is returning videos of all remote users. My desired layout is like for 3 users:

===video1=video2==========video3======

for 4 users:

===video1=video2======video3=video4===

for 5 users:

===video1=video2=video3==========video4=video5======<div id='gallery-parent' style={{ display: 'flex', flex: '1 1', flexDirection: 'column', gap: '1rem', position: 'relative' }}><div style={{ alignItems: 'stretch',  display: 'flex', flex: '1 1', gap: '1rem',justifyContent:'center'}}><LocalTile /><RemoteTiles /></div>                    </div>

its not working for me as all users are rendering in same column and shrinking videos.