React forwardRef - Property does not exist on type IntrinsicAttributes

Question

I have a problem with ref.

My Component:

type DateInputProps = {
  label?: string;
  name: string;
  defaultValue: Date | null;
  maxDate?: Date;
  minDate?: Date;
  noMargin?: boolean;
  forwardRef?: React.RefObject<HTMLInputElement>;
  onChange: (date: Date | null) => void;
};

export const DateInput: FC<DateInputProps> = forwardRef<HTMLInputElement, DateInputProps>(
  ({ defaultValue, label, name, noMargin = false, maxDate, minDate, forwardRef, onChange, ...props }, ref) => {

...

  const CustomInput = ({ value, onClick }: { value?: Date; onClick?: () => void }) => (
      <Input
        ref={ref}
        name={name}
        defaultValue={value}
        onBlur={onBlur}
        alignment={InputAlignment.Right}
        iconRight={{ onClick, icon: 'calendar' }}
        iconLeft={value ? { icon: 'close', onClick: () => setDateValue(null) } : undefined}
      />
    );

...

I get the follow errors:

error TS2322: Type '{ ref: (ref: HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement | CustomElement<Record<string, any>> | ... 12 more ... | null) => void; ... 4 more ...; maxDate: Date | undefined; }' is not assignable to type 'IntrinsicAttributes & DateInputProps & { children?: ReactNode; }'.

Property 'ref' does not exist on type 'IntrinsicAttributes & DateInputProps & { children?: ReactNode; }'.

I also tried with forwardRef as Property - same result.

React Version: 16.14.0

Answer 1

Solution: react.ForwardedRef<HTMLInputElement>