Material-UI Select コンポーネントのメニューの表示位置を変更する

import React, { ReactElement } from "react";

import { Select, MenuItem } from "@material-ui/core";

interface Props {
  items: { label: string; value: string; disabled: boolean }[];
  value: string;
  onChange: (e: string) => void;
}

export function ExampleSelect({
  items,
  onChange,
  value,
}: Props): ReactElement | null {

  const handleChange = (
    e: React.ChangeEvent<{ name?: string | undefined; value: unknown }>
  ) => {
    onChange(e.target.value as string);
  };

  return (
    <Select
      value={value}
      onChange={handleChange}
      displayEmpty
      variant="outlined"
      MenuProps={{
        getContentAnchorEl: null,
        anchorOrigin: { vertical: "top", horizontal: "left" },
        transformOrigin: { vertical: "top", horizontal: "left" },
      }}
    >
      {items.map((item) => {
        return (
          <MenuItem
            key={item.label}
            value={item.value}
            disabled={item.disabled}
          >
            {item.label}
          </MenuItem>
        );
      })}
    </Select>
  );
}

...

  return (
    <Select
      value={value}
      onChange={handleChange}
      displayEmpty
      variant="outlined"
      MenuProps={{
        getContentAnchorEl: null, // anchorOrigin, transformOrigin が変更可能になるように元々ポップオーバーの基準となっている要素を解除
        anchorOrigin: { vertical: "top", horizontal: "left" }, // ポップオーバーの表示起点
        transformOrigin: { vertical: "top", horizontal: "left" }, // 表示時の transform の起点
      }}
    >
      {items.map((item) => {
        return (
          <MenuItem
            key={item.label}
            value={item.value}
            disabled={item.disabled}
          >
            {item.label}
          </MenuItem>
        );
      })}
    </Select>
  );

...