center children with parent flex row with wrap and have child start left on wrapped new row [duplicate]

I have a container that has flex wrap with flex direction row as well as justify content center. This works fine for centering the children, however, I would also like to have the children start on the left instead of center when it wraps to next row

<div style={{ flex: 1, padding: 10, backgroundColor: '#FFFFFF' }}><div style={{            backgroundColor: '#FFF',        flex: 1,        flexWrap: 'wrap',        flexDirection: 'row',        justifyContent: 'center',        gap: 25,        padding: 15}}>        {data.map((d, i) => (<div              style={{                justifyContent: 'center',                backgroundColor: '#f9fafb',                height: '100%',                width: '100%'              }}><Icon                color={``}                name={`file-contract`}                size={40}                sharpSolid              /><p variant="titleLarge" >{d.name}</p></div>        ))}</div></div>