Custom Controller in React TSX

[chanphiromsok]

In v6 I used to custom Controller I use UseControllerOptions but after I upgrade to v7 its lost this interface so now which interface should I use for custom Controller instead of UseControllerOptions

V6

import React from "react";
import { Input, InputProps, FormLabel, FormLabelProps } from "@chakra-ui/react";
import { Controller, UseControllerOptions } from "react-hook-form";

type ControllerProps = {
  controller: UseControllerOptions;
  input?: InputProps;
  labelProp?: FormLabelProps;
  label?: string;
};

export const ControllerInput: React.FC<ControllerProps> = ({
  controller,
  input = { mb: "100px" },
  labelProp,
  label,
}) => {
  return (
    <Controller
      {...controller}
      render={(props) => (
        <>
          <FormLabel {...labelProp}>{label}</FormLabel>
          <Input {...props} {...input} />
        </>
      )}
    />
  );
};

How about V7 ?

[bluebill1049]

useControllerPros https://react-hook-form.com/ts/#UseControllerProps

[chanphiromsok]

is it correct? but i got and error on Input field

import { Input, InputProps, FormLabel, FormLabelProps } from "@chakra-ui/react";
import React from "react";
import {
  Controller,
  UseControllerProps
} from "react-hook-form";

type Props<T> = {
  controller: UseControllerProps<T>;
  input?: InputProps;
  labelProp?: FormLabelProps;
  label?: string;
};

export function ControllerInput<T>({
  controller,
  input = { mb: "100px" },
  labelProp,
  label,
}: Props<T>): React.ReactElement {
  return (
    <Controller
      {...controller}
      render={({ field }) => (
        <>
          <FormLabel {...labelProp}>{label}</FormLabel>
          <Input {...field} {...input} />
        </>
      )}
    />
  );
}

[bluebill1049]

provide a csb.

[chanphiromsok]

this is the error when using UseControllerProps on input field

[chanphiromsok]

if I'm using Controller direct it work fine but I want to use custom instead

Work fine

      <Controller control={control} name="category" render={({field})=><Input {...field} />} />