ref not working in React-Bootstrap + TypeScript

Describe the bug If I use ref with register in a Control the value is invalid.

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<ReplaceProps<"input", BsPrefixProps<"input"> & FormControlProps>>): FormControl<"input">', gave the following error.
    Type '(ref: ElementLike) => void' is not assignable to type '(string & ((instance: HTMLInputElement) => void)) | (string & RefObject<HTMLInputElement>) | (((instance: FormControl<"input">) => void) & ((instance: HTMLInputElement) => void)) | (((instance: FormControl<...>) => void) & RefObject<...>) | (RefObject<...> & ((instance: HTMLInputElement) => void)) | (RefObject<...> ...'.
      Type '(ref: ElementLike) => void' is not assignable to type 'string & ((instance: HTMLInputElement) => void)'.
        Type '(ref: ElementLike) => void' is not assignable to type 'string'.
  Overload 2 of 2, '(props: ReplaceProps<"input", BsPrefixProps<"input"> & FormControlProps>, context?: any): FormControl<"input">', gave the following error.
    Type '(ref: ElementLike) => void' is not assignable to type '(string & ((instance: HTMLInputElement) => void)) | (string & RefObject<HTMLInputElement>) | (((instance: FormControl<"input">) => void) & ((instance: HTMLInputElement) => void)) | (((instance: FormControl<...>) => void) & RefObject<...>) | (RefObject<...> & ((instance: HTMLInputElement) => void)) | (RefObject<...> ...'.
      Type '(ref: ElementLike) => void' is not assignable to type 'string & ((instance: HTMLInputElement) => void)'.
        Type '(ref: ElementLike) => void' is not assignable to type 'string'.ts(2769)
index.d.ts(104, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<FormControl<"input">> & Readonly<ReplaceProps<"input", BsPrefixProps<"input"> & FormControlProps>> & Readonly<{ children?: ReactNode; }>'
index.d.ts(104, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<FormControl<"input">> & Readonly<ReplaceProps<"input", BsPrefixProps<"input"> & FormControlProps>> & Readonly<{ children?: ReactNode; }>'

if instead of register() I use () => register() the code compiles but is not registering the input.

Screenshots

[frankie567]

From what I’ve tried, it seems that it’s only a mismatch between how RHF and React-Bootstrap type a ref. It works perfectly by doing a simple cast:

type RBRef = (string & ((ref: Element | null) => void));

<Form.Control type="text" ref={register({ required: true }) as RBRef}></Form.Control>

[mnesarco]

Thank you @bluebill1049 for putting time into this, right now I am finishing a product and have no time to supply the codesandbox example this week. by the way, I used the <Controller> component and it worked very well without adding to much verbosity.

            <Form.Group controlId="loginEmail">
                <Form.Label>Email address</Form.Label>
                <Controller
                    as={
                        <Form.Control
                            type="email"
                            placeholder="Enter email"
                            isInvalid={!!errors.user} />
                    }
                    control={control}
                    name="user"
                    rules={{ required: true }}
                />
                {errors.user &&
                    <Form.Control.Feedback type="invalid">
                        {errors.user.message || 'Required'}
                    </Form.Control.Feedback>
                }
            </Form.Group>

I will try to come back to this next week and provide the codesandbox.

Thank you for this great lib.