value: UnpackNestedValue<PathValue<T, Path<T>>>

I'm using react-hook-form and Im getting this error value: UnpackNestedValue<PathValue<T, Path<T>>> whenever I pass the value as a prop.

Here is my switch button component:

type Props<T> = {
  height: number
} & UseControllerProps<T> &
  InputHTMLAttributes<HTMLInputElement>

function SwitchButton<T>(props: Props<T>) {
  const {
    field: { onChange, value },
  } = useController(props)

  return (
    <Switch height={props.height}>
      <input type='checkbox' checked={value} onChange={onChange} />
      <Slider height={props.height}></Slider>
    </Switch>
  )
}

In the above code Im getting an error in checked attribute: Type 'UnpackNestedValue<PathValue<T, Path<T>>>' is not assignable to type 'boolean | undefined'.

This is my form:

const defaultValues = {
  title: '',
  project: {
    id: '',
    title: ''
    },
  isOpen: false,
  ...
  }

const { handleSubmit, control, setError, watch } =
  useForm<FormType>({
    defaultValues,
  })

<form onSubmit={handleSubmit(onSubmitHandler)}>
  <SwitchButton<FormType>
    name='isOpen'
    height={20}
    control={control}
  />
  ...
</form>

import { NestedValue } from 'react-hook-form'

type FormType = {
  title: string
  project: NestedValue<{
    id: string
    title: string
  }>
  isOpen: boolean
  ...
}

Im getting the same error in all other form components, does anyone know how to fix this? Thank you