GridListTile items from Material UI are not aligned

Question

I would like to achieve this layout using GridList and GridListTile from Material UI:

I don't know to achieve the layout in the screenshot above. I implemented this layout, but I don't know how to change that:

codesandbox

import React from "react";
import "./styles.css";
import GridList from "@material-ui/core/GridList";
import GridListTile from "@material-ui/core/GridListTile";

function FstBox(props) {
  return <div style={{ background: "yellow", height: "100%" }}>fst box</div>;
}

function SndBox(props) {
  return <div style={{ background: "green", height: "100%" }}>snd Box</div>;
}

function ThdBox(props) {
  return <div style={{ background: "blue", height: "100%" }}>thd Box</div>;
}

export default function App() {
  return (
    <div className="App">
      <GridList cellHeight={80} cols={12}>
        <GridListTile cols={6} rows={1}>
          <FstBox />
        </GridListTile>
        <GridListTile cols={6} rows={2}>
          <SndBox />
        </GridListTile>
        <GridListTile cols={6} rows={1}>
          <ThdBox />
        </GridListTile>
      </GridList>
    </div>
  );
}