React Hook Form v7でMaterial UI v5 Selectを使う方法

問題

react-hook-formが便利なので使っていたところ、MUI v5 のTextFieldでは簡単に動いたのですが、Selectは同じノリで使えませんでした。

失敗例

import React from "react";
import { SubmitHandler, useForm } from "react-hook-form";

import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import Select from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";

type SampleForm = {
  postalCode: string;
  prefecture: string; // Selectで選びたいもの
  city: string;
  address: string;
  building: string;
};

export const Sample: React.FC = () => {
 
  const { register, handleSubmit } = useForm<StoreAddForm>();

  const addAddress: SubmitHandler<SampleForm> = (input) => {
    console.log(input);
  };

  return (
    {/* 省略 */}
    <Select
      sx={{ mt: 2 }}
      required
      fullWidth
      label="都道府県"
      {...register("prefecture")}
    >
      <MenuItem value="東京">東京</MenuItem>
      <MenuItem value="埼玉">埼玉</MenuItem>
      <MenuItem value="千葉">千葉</MenuItem>
    </Select>
    {/* 省略 */}
    <Button
      type="submit"
      onClick={handleSubmit(addAddress)}
      fullWidth
      variant="contained"
      sx={{ mt: 3, mb: 2 }}
    >
      登録
    </Button>
  );
};

依存関係

"dependencies": {
  "@mui/material": "^5.2.1",
  "@types/react": "^17.0.0",
  "@types/react-dom": "^17.0.0",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "react-hook-form": "^7.20.5",
  "typescript": "^4.1.2",
}

解決方法

Controllerを使うと動きました。同じ部分は削除したわけではなく、省略してます。

import { SubmitHandler, useForm, Controller } from "react-hook-form"; // Controllerを追加

export const Sample: React.FC = () => {
 
  const { register, handleSubmit, control } = useForm<StoreAddForm>(); // controlを追加

  return (
    {/* 省略 */}
    <Controller
      name="prefecture"
      control={control}
      render={({ field }) => (
        <TextField
          {...field}
           select
           sx={{ mt: 2 }}
           required
           fullWidth
           label="都道府県"
        >
          <MenuItem value="東京">東京</MenuItem>
          <MenuItem value="埼玉">埼玉</MenuItem>
          <MenuItem value="千葉">千葉</MenuItem>
        </TextField>
      )}
    />
    {/* 省略 */}
  );
};

（補足）

• Selectコンポーネントではない件について
  Selectを使っても動作はしましたが、なぜかlabel指定が効かず、"都道府県"のラベルが画面に出ませんでした。
  TextFieldにselect属性を付ける方法だとlabelが出ます。

• コードは関係なさそうなものを適当に省略しているため、分からなかったら聞いてください。

• React Hook FormやMaterial UIは詳しくないので、動作保証はしかねます。

  • 間違っていれば教えてください。