I am working on a website that has been build before me and it uses a method of the Controller part of react-hook-form that I have not seen before.

This is an example of the code:

const CheckboxController = (props: CheckboxProps) => {
  return (
    <Wrapper>
      <Controller as={CheckboxInput} {...props} /> 
    </Wrapper>
  );
};

With CheckboxInput being a simple material-ui checkbox.

I understand the traditional method of using something like:

const CheckboxController = (props: CheckboxProps) => {
  return(
    <Controller
    name={props.name}
    control={props.control}
    render={({ field }) => (
      <label>
          <Checkbox
            onChange={(e) => field.onChange(e.target.checked)}
            checked={props.checked}
            disabled={props.isDisabled}
            />
            {props.label}
        </label>
      )}
    />
  );
};

But unfortunately the entire site is build upon the <Controller as={}> setup. I cant seem to find any info online about it to figure out how it works. Does anyone know about this method or can point me in the right direction? Thank you.