Why is the space key being filtered out by MUI's Text Field component?

When I place one of MUI's Text Field components inside the column header of a Data Grid component, I'm unable to type a space into the text field. Similarly, if I press the right or left arrow key while the text field has focus, the text field loses focus rather than changing the position of the cursor within the text field.

Sandbox: https://codesandbox.io/s/cant-add-space-to-muis-textfield-erpvc?file=/src/App.js

import React from "react";
import { DataGrid } from "@mui/x-data-grid";
import TextField from "@mui/material/TextField";
import "./styles.css";

export default function App() {
  const rows = [
    { id: 1, "Column 1": 1, "Column 2": 2 },
    { id: 2, "Column 1": 3, "Column 2": 4 },
    { id: 3, "Column 1": 4, "Column 2": 5 }
  ];
  const createColumn = (name) => {
    return {
      field: name,
      align: "center",
      editable: true,
      sortable: false
    };
  };
  const columns = [
    createColumn("Column 1"),
    createColumn("Column 2"),
    {
      field: "Add a split",
      width: 225,
      sortable: false,
      renderHeader: (params) => {
        return (
          <TextField
            placeholder="Enter column name"
            size="small"
            onKeyDown={(event) => console.log("Key down: ", event.key)}
            onKeyUp={(event) => console.log("Key up: ", event.key)}
            onKeyPress={(event) => console.log("Key press: ", event.key)}
          />
        );
      }
    }
  ];

  return (
    <div className="App">
      <DataGrid
        className="App-data-grid"
        rows={rows}
        columns={columns}
        disableSelectionOnClick
        disableColumnMenu
      />
    </div>
  );
}