MUI v5 Grid layout only changes to the correct layout after refreshing

Question

When I first land on this page, the layout is messed up, but if I refresh it, the layout got fixed. Any idea where the problem would be at?

I'm using MUI v5 Grid. I'm new to this so I'm still a little bit confused.

In the following code I left out the non-styling implementation for simplicity.

I can provide more code if necessary!

Any advice would be appreciated!!

Weird layout at first:

Refreshed, ideal layout:

Code:

export default function OfferRideForm() {
  const router = useRouter();
  const [availableSpots, setSpots] = useState(1);
  return (
    <form>
      <Grid
        container
        rowSpacing={2}
        columnSpacing={2}
        justifyContent={"center"}
        alignItems={"center"}
      >
        <OriginToDestForm />
        <Grid item xs={2.5}>
          departure time
        </Grid>
        <PickRideTime />
        <Grid item xs={6.5} />
        <Grid item xs={2.5}>
          available spots
        </Grid>
        <Grid item xs={9.5}>
          <NumberPicker
           ...
          />
        </Grid>
        {/* luggage space*/}
        <Grid item xs={2.5}>
          luggage space
        </Grid>
        <Grid item xs={3}>
          <LuggageDropDown />
        </Grid>
        <Grid item xs={6.5} /> {/* for spacing */}
        {/* phone number */}
        <Grid item xs={2.5}>
          phone number (optional)
        </Grid>
        <Grid item xs={3}>
          <TextField helperText="(123)456-7890" label="Phone Number" />
        </Grid>
        <Grid item xs={6.5} /> {/* for spacing */}
        <Grid item xs={2.5}>
          additional comments
        </Grid>
        <Grid item xs={9.5} alignItems={"left"}>
          <TextField
            variant="outlined"
            helperText='please specify if you answered "other" to any questions'
          />
        </Grid>
        <Grid item xs={1}>
          <Button
            variant="contained"
            color="primary"
            style={{
              borderRadius: "10px",
              textAlign: "center",
              margin: "20px auto",
            }}
            onClick={() => {
              router.push("/fulfill-ride-requests");
            }}
          >
            <Typography
              variant="button"
              style={{ textTransform: "none", textAlign: "center" }}
            >
              next
            </Typography>
          </Button>
        </Grid>
      </Grid>
    </form>
  );
}

Components: OriginToDestForm.tsx

function OriginToDestForm() {
  return (
    <Grid
      item
      xs={12}
      container
      justifyContent="center"
      alignItems="center"
      textAlign="center"
      margin="30px 0"
    >
      <Grid item>
        <Autocomplete
          options={places}
          sx={{ width: 300 }}
          renderOption={(props, places) => (
            ...
          )}
          renderInput={(params) => (
           ...
          )}
        />
      </Grid>
      <Grid item xs={2}>
        <ArrowForwardIcon fontSize={"large"} color="primary" />
      </Grid>
      <Grid item>
        <Autocomplete
          options={places}
          sx={{ width: 300 }}
          ...
        />
      </Grid>
    </Grid>
  );
}

export default OriginToDestForm;

PickRideTime.tsx

function PickRideTime() {
  ...

  return (
    <Grid item xs={3} container rowSpacing={0.5} columnSpacing={2}>
      {!isFlexible && (
        <Grid item>
          <LocalizationProvider dateAdapter={AdapterDateFns}>
            <DateTimePicker
             ...
            />
          </LocalizationProvider>
        </Grid>
      )}
      {isFlexible && (
        <Grid item>
          <LocalizationProvider dateAdapter={AdapterDateFns}>
            <DateRangePicker
              ...
            />
          </LocalizationProvider>
        </Grid>
      )}
      <Grid item>
        <FormControlLabel
          ...
        />
      </Grid>
    </Grid>
  );
}

export default PickRideTime;

LuggageDropDown

function LuggageDropDown() {
  return (
    <div>
      {/* <InputLabel id="simple-select-label">Luggage Space</InputLabel> */}
      <Select fullWidth required defaultValue={"None"}>
        <MenuItem value={"None"}>None</MenuItem>
        <MenuItem value={"Limited (1 small suitcase or less)"}>
          Limited (one small suitcase or less)
        </MenuItem>
        <MenuItem value={"1 - 2 Suitcases"}>1-2 suitcases</MenuItem>
        <MenuItem value={"3+ suitcases"}> 3+ suitcases</MenuItem>
        <MenuItem value="Other"> Other</MenuItem>
      </Select>
    </div>
  );
}

export default LuggageDropDown;

Thank you!