完整错误：FormControl中有多个InputBase组件。这会导致视觉不一致，请仅使用一个InputBase。
我试着将我的表单封装在FormControl中，有人可以帮助或修改此代码，这样错误就会消失。我也试着删除控制器，但问题仍然存在。

import React, { useEffect } from "react";
import { LocalizationProvider, DatePicker } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { useForm, Controller } from "react-hook-form";
import {
  MenuItem,
  Typography,
  Select,
  FormControl,
  Button,
} from "@mui/material";
import InnerContainer from "./InnerContainer";

const offices = [
  { value: "building", label: "Building Management Office" },
  { value: "information", label: "Information Technology Resource Office" },
  { value: "engineering", label: "Engineering and Science Laboratory Office" },
];

const itemsByOffice = {
  building: ["Spalding Basketball", "Mikasa Volleyball"],
  information: ["Nikon D300", "Profoto B10 Plus Strobe Lights"],
  engineering: ["Pyrex Beaker", "Pyrex Graduated Cycliner"],
};

const purposes = [
  { value: "111", label: "Academic Purposes - Assignment & Activities" },
  { value: "112", label: "Academic Purposes - Midterms & Finals" },
  { value: "113", label: "Organization Purposes" },
  { value: "114", label: "Special Events" },
  { value: "115", label: "Others" },
];

const endorser = [
  { value: "211", label: "Ms. Roselle Wednesday Gardon" },
  { value: "212", label: "Sir. Jojo Castillo" },
  { value: "213", label: "Ms. Maryjane Lopez" },
  { value: "214", label: "Ms. Mary Ann Gomez" },
  { value: "215", label: "Ms. Maryjoy Padua" },
];

const BorrowForm = () => {
  const { control, handleSubmit, watch } = useForm();
  const selectedPurpose = watch("purposes");
  const selectedOffice = watch("offices");

  const onSubmit = (data) => {
    console.log("submit hit with data:", data);
  };

  useEffect(() => {
    console.log("Selected Office changed to:", selectedOffice);
  }, [selectedOffice]);

  useEffect(() => {
    console.log("Selected Purpose changed to:", selectedPurpose);
  }, [selectedPurpose]);

  return (
    <InnerContainer>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
      <FormControl fullWidth variant="outlined">
          <Typography variant="h4">Borrowing Transaction</Typography>

          <div className="borrowing-trans">
            <div className="endorser">
              <Typography>Endorsed By</Typography>
              <Controller
                name="endorser"
                control={control}
                defaultValue={endorser[0].value}
                render={({ field }) => (
                  <Select {...field} label="Endorsed By">
                    {endorser.map((option) => (
                      <MenuItem key={option.value} value={option.value}>
                        {option.label}
                      </MenuItem>
                    ))}
                  </Select>
                )}
              />
            </div>

            <div className="office">
              <Typography>Office</Typography>
              <Controller
                name="offices"
                control={control}
                defaultValue=""
                render={({ field }) => (
                  <Select {...field} label="Office">
                    {offices.map((office) => (
                      <MenuItem key={office.value} value={office.value}>
                        {office.label}
                      </MenuItem>
                    ))}
                  </Select>
                )}
              />
            </div>
          </div>

          <div className="item-details">
            <div className="equipment-name">
              <Typography>Equipment Name</Typography>
              <Controller
                name="items"
                control={control}
                defaultValue=""
                render={({ field }) => (
                  <Select {...field} label="Equipment Name">
                    {itemsByOffice[selectedOffice]?.map((item) => (
                      <MenuItem key={item} value={item}>
                        {item}
                      </MenuItem>
                    ))}
                  </Select>
                )}
              />
            </div>
          </div>

          <Button
            type="submit"
            variant="contained"
            color="primary"
            onClick={handleSubmit(onSubmit)}
          >
            Submit
          </Button>
          </FormControl>
      </LocalizationProvider>
    </InnerContainer>
  );
};

export default BorrowForm;

字符串
我试图删除控制器，因为也许这是错误的原因

import React, { useEffect } from "react";
import { LocalizationProvider, DatePicker } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { useForm } from "react-hook-form";
import {
  MenuItem,
  Typography,
  Select,
  FormControl,
  Button,
} from "@mui/material";
import InnerContainer from "./InnerContainer";

const offices = [
  { value: "building", label: "Building Management Office" },
  { value: "information", label: "Information Technology Resource Office" },
  { value: "engineering", label: "Engineering and Science Laboratory Office" },
];

const itemsByOffice = {
  building: ["Spalding Basketball", "Mikasa Volleyball"],
  information: ["Nikon D300", "Profoto B10 Plus Strobe Lights"],
  engineering: ["Pyrex Beaker", "Pyrex Graduated Cycliner"],
};

const purposes = [
  { value: "111", label: "Academic Purposes - Assignment & Activities" },
  { value: "112", label: "Academic Purposes - Midterms & Finals" },
  { value: "113", label: "Organization Purposes" },
  { value: "114", label: "Special Events" },
  { value: "115", label: "Others" },
];

const endorser = [
  { value: "211", label: "Ms. Roselle Wednesday Gardon" },
  { value: "212", label: "Sir. Jojo Castillo" },
  { value: "213", label: "Ms. Maryjane Lopez" },
  { value: "214", label: "Ms. Mary Ann Gomez" },
  { value: "215", label: "Ms. Maryjoy Padua" },
];

const BorrowForm = () => {
  const { control, handleSubmit, setValue, watch } = useForm();
  const selectedPurpose = watch("purposes");
  const selectedOffice = watch("offices");

  const onSubmit = (data) => {
    console.log("submit hit with data:", data);
  };

  useEffect(() => {
    console.log("Selected Office changed to:", selectedOffice);
  }, [selectedOffice]);

  useEffect(() => {
    console.log("Selected Purpose changed to:", selectedPurpose);
  }, [selectedPurpose]);

  return (
    <InnerContainer>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <FormControl fullWidth variant="outlined">
          <Typography variant="h4">Borrowing Transaction</Typography>

          <div className="borrowing-trans">
            <div className="endorser">
              <Typography>Endorsed By</Typography>
              <Select
                name="endorser"
                label="Endorsed By"
                value={watch("endorser") || ""}
                onChange={(e) => {
                  setValue("endorser", e.target.value);
                }}
              >
                {endorser.map((option) => (
                  <MenuItem key={option.value} value={option.value}>
                    {option.label}
                  </MenuItem>
                ))}
              </Select>
            </div>

            <div className="office">
              <Typography>Office</Typography>
              <Select
                name="offices"
                label="Office"
                value={watch("offices") || ""}
                onChange={(e) => {
                  setValue("offices", e.target.value);
                }}
              >
                {offices.map((office) => (
                  <MenuItem key={office.value} value={office.value}>
                    {office.label}
                  </MenuItem>
                ))}
              </Select>
            </div>
          </div>
        </FormControl>

        <FormControl fullWidth variant="outlined" style={{ marginTop: "16px" }}>
          <div className="item-details">
            <div className="equipment-name">
              <Typography>Equipment Name</Typography>
              <Select
                name="items"
                label="Equipment Name"
                value={watch("items") || ""}
                onChange={(e) => {
                  setValue("items", e.target.value);
                }}
              >
                {itemsByOffice[selectedOffice]?.map((item) => (
                  <MenuItem key={item} value={item}>
                    {item}
                  </MenuItem>
                ))}
              </Select>
            </div>
          </div>
        </FormControl>

        <Button
          type="submit"
          variant="contained"
          color="primary"
          onClick={handleSubmit(onSubmit)}
          style={{ marginTop: "16px" }}
        >
          Submit
        </Button>
      </LocalizationProvider>
    </InnerContainer>
  );
};

export default BorrowForm;

型