issue: build error when swizzling the Controller component

[json2d]

I'm swizzling the Controller component to do some simple wrapping:

import { Controller, ControllerProps } from "react-hook-form";

export const TestableController: React.FC<ControllerProps> = ({
  name,
  ...otherProps
}) => (
  <div data-testid={name}>
    <Controller name={name} {...otherProps} />
  </div>
);

then when i use this TestableController component in place of the Controller component, i get a TS build error on the control prop using the control from useFormContext:

import { TestableController } from "./TestableController";
import { useFormContext, Controller } from "react-hook-form";
import { Fields } from "./LandingPage";

export default function FormSection() {
  const { control } = useFormContext<Fields>();

  return (
    <div className="App">
      <TestableController
        name="foo"
        control={control} // 🔴 build error
        render={({ field }) => (
          <label htmlFor={field.name}>
            foo:
            <br />
            <input {...field} type="text" />
          </label>
        )}
      />
      ...
    </div>

the build error is:

Type 'Control<Fields, any>' is not assignable to type 'Control<FieldValues, any>'.
  The types of '_options.resolver' are incompatible between these types.
    Type 'Resolver<Fields, any>' is not assignable to type 'Resolver<FieldValues, any>'.ts(2322)

is there some typing magic i can apply here to fix this?

live example:
https://codesandbox.io/s/confident-khayyam-ysqxtz?file=/src/FormSection.tsx:333-359

version:
7.43.9