Need help with forwarding refs for react-hook-form usage.

[thevipinmishra]

Hi, I'm working on a set of re-usable components library in React where I'm utilizing ark-ui components and they are mostly going to be used with reac-hook-form library.

Now, this is the pattern I'm following, to add the ref on the "internal hidden input" components so that react-hook-form can easily identify them.

import { Switch as SwitchPrimitive } from "@ark-ui/react";
import clsx from "clsx";
import * as React from "react";

type SwitchElement = React.ElementRef<typeof SwitchPrimitive.Root>;

interface SwitchProps extends 
    React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
 {
  label?: string;
}

const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitive.HiddenInput>,
  SwitchProps
>((props, ref) => {
  const { className, label,  ...rest } = props;

  return (
    <SwitchPrimitive.Root
      {...rest}
    >
      <SwitchPrimitive.Control>
        <SwitchPrimitive.Thumb/>
      </SwitchPrimitive.Control>

      {label ? (
        <SwitchPrimitive.Label>
          {label}
        </SwitchPrimitive.Label>
      ) : null}
      
      <SwitchPrimitive.HiddenInput ref={ref} />
      
    </SwitchPrimitive.Root>
  );
});

Switch.displayName = "Switch";
export { Switch };
export type { SwitchProps };

Is it the correct usage? most of the components are working but having issues with Slider and Datepicker components.

In Slider - I'm getting TypeScript issues related to min and max types being string | number | undefined - I don't know how, I'm just spreading the props.

In datepicker - How to get this working with Range picker since it requires 2 Inputs?

I would really appreciate some help here. 🙏🙏