Rowspan has no effect on table heading

I have created a mui table. this table has two headings, out of which only one column will have it's values below. ie only second column with name Heading2 will be having values below it. Heading1 doesn't have it's values below it.

import * as React from "react";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";


const rows = [
  {
    id: 1,
    calorie: 10
  },
  {
    id: 2,
    calorie: 20
  }
];

export default function BasicTable() {
  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 300 }} aria-label="simple table">
        <TableHead>
          <TableRow>
            {/* I want `Heading1` to occupy entire vertical column blow it */}
            <TableCell rowSpan={3}>Heading1</TableCell>
            <TableCell>Heading2</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.id}>
              {/* this should display below `Heading2` */}
              <TableCell>{row.calorie}</TableCell> 
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

Hence below Heading1 it should occupy vertically the entire column and Heading2 should display values. that is the requirement. But right now 'Heading2's values are displayed under 'Heading1' column.

I have used rowspan, but it has no effect.

codesandbox working code.