你已经很接近了，除了你的MuiPhoneInput正在丢失你用来得到value和onChange的field反结构的引用。有一个重要的ref需要被设置包含在field中。下面是一个Controller组件处理自定义掩码输入的官方example。
下面是我的working sandbox，它演示了如何将material-ui-phone-material与react-hook-form集成。

• 由于您是在MUI组件上设置defaultCountry={"il"}，因此还要设置解析到defaultValues内部的默认值，以便react-hook-form知道它。
• 通过rules>validate对象内使用的isNotFilledTel()添加验证。
• 处理参考焦点为undefined的React.StrictMode问题。
• • 应用程序. js**

import { Controller, useForm } from "react-hook-form";
import MuiPhoneInput from "material-ui-phone-number";

export default function App() {
  const {
    handleSubmit,
    formState: { errors },
    control,
  } = useForm({
    reValidateMode: "onSubmit",
    defaultValues: {
      phone: "+972",
    },
  });

  const isNotFilledTel = (v: string) => {
    return v.length < 15 ? "Phone number is required." : undefined;
  };

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <Controller
        name="phone"
        control={control}
        rules={{
          required: "Phone is required",
          validate: {
            inputTelRequired: isNotFilledTel,
          },
        }}
        render={({ field }) => {
          return (
            <MuiPhoneInput
              {...field}
              ref={(ref) => {
                if (ref && !ref.focus) ref.focus = () => {};
              }}
              defaultCountry={"il"}
              variant={"outlined"}
              error={!!errors.phone}
              helperText={<>{errors?.phone?.message}</>}
            />
          );
        }}
      />
      {errors.phone && <p>Phone is required.</p>}
      <button type="submit">Submit</button>
    </form>
  );
}