How do I remove gaps caused by uneven heights in components when using Material Ui Grid?

Question

Im quite new to react and mui design thus im facing some issue in the logic of implemeting the layout.

import * as React from "react";
import { styled } from "@mui/material/styles";
import Grid from "@mui/material/Grid";
import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";

const Item = styled(Paper)(({ theme }) => ({
  backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff",
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: "center",
  color: theme.palette.text.secondary,
}));

export default function RowAndColumnSpacing() {
  return (
    <Box sx={{ width: "100%" }}>
      <Grid container spacing={0}>
        <Grid item xs={6}>
          <Item sx={{ height: "20vh" }}>1</Item>
        </Grid>
        <Grid item xs={6}>
          <Item sx={{ height: "40vh" }}>2</Item>
        </Grid>
        <Grid item xs={6}>
          <Item>3</Item>
        </Grid>
        <Grid item xs={6}>
          <Item>4</Item>
        </Grid>
      </Grid>
    </Box>
  );
}

Due to the uneven heights in the Item component there is a gap in "cells" column wise current layout. I want to negate the gap between item 3 and item one, how do i go about doing so?

I have tried allignment and flex suggestions to no avail