[Controller] Sibling fields seem to influence the type of field.value

[janKozie1]

Describe the bug
The type of field.value (in the render prop of a <Controller />) seems to not respect what name was passed to the controller - the type instead includes types from other, sibling fields.

To Reproduce
Steps to reproduce the behavior:

1. Check the types of the badType variable

Codesandbox link (Required)
https://codesandbox.io/s/lucid-franklin-qf0h8?file=/src/App.tsx

Expected behavior
The type of field.value depends on the name passed to the <Controller />

[bluebill1049]

import "./styles.css";
import { Controller, FormProvider, useForm } from "react-hook-form";

type Form = {
  fieldA: boolean;
  fieldB: string;
  fieldC: Date;
};

export default function App() {
  const methods = useForm<Form>();

  return (
    <FormProvider {...methods}>
      <div className="App">
        <Controller
          name="fieldB"
          render={({ field }) => {
            // should be a string,
            // but other fields seem to influence the type
            // const a = field.value;

            return <input {...field} />;
          }}
        />
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    </FormProvider>
  );
}

remove the generic on the Controller.

[janKozie1]

That makes the field.value be any type. Am i missing something?

[bluebill1049]

you are missing control

[Cielquan]

I am running into the same issue.

The docs say that the control prop is optional for the Controller component if the FormProvider component is used:

@bluebill1049 Am I right, that the control prop in this case is optional at the runtime level, but needed for correct typing?
If so, it would be nice to update the docs with a hint for this scenario.