Reactjs 有没有办法将MUI网格元素与FlexStart对齐

const { Box, Grid } = MaterialUI;

function App() {
  return (
    <div className="App">
      <Grid
        container
        style={{
          border: "1px solid red",
          justifyContent: "center",
        }}
      >
        {[0, 1, 2, 3, 4, 5].map((value) => (
          <Grid
            key={value}
            item
            xs={6}
            sm={5}
            md={4}
            lg={4}
            style={{
              border: "1px solid blue",
              // justifyContent: "flex-start",
            }}
          >
            <Box>
              <div style={{ alignSelf: "flex-start", width: "100%" }}>
                {value}
              </div>
            </Box>
          </Grid>
        ))}
      </Grid>
    </div>
  );
}

ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
);

<div id="root"></div>
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>