Typescript error TS2322 - for outerRef and innerRef

[ofirrifo]

Bug Report

Describe the Bug

Im getting this error

TS2322: Type 'MutableRefObject<HTMLElement | null>' is not assignable to type 'LegacyRef<HTMLDivElement> | undefined'.   Type 'MutableRefObject<HTMLElement | null>' is not assignable to type 'RefObject<HTMLDivElement>'.     Types of property 'current' are incompatible.       Type 'HTMLElement | null' is not assignable to type 'HTMLDivElement | null'.         Property 'align' is missing in type 'HTMLElement' but required in type 'HTMLDivElement'.  lib.dom.d.ts(6327, 5): 'align' is declared here. index.d.ts(137, 9): The expected type comes from property 'ref' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

Example of use

 const { outerRef, innerRef, items, scrollToItem } = useVirtual<HTMLElement, HTMLElement>({
    itemCount: 1000,
    itemSize: 25,
  });

  return (
    <div ref={outerRef} >
      <div ref={innerRef}>
            ...       
      </div>
   </div>
  );

A clear and concise description of what the bug is.

How to Reproduce

• Create a react typescript project
• set both outerRef, innerRef to ref like in the example

Expected Behavior

Not to see the error

Screenshots

Add screenshots to help explain your problem.

[nickbyte]

any solution for this?

[holz-at]

@ofirrifo @nickbyte have you tried to specify the type as HTMLDivElement instead of HTMLElement?

[at0mat]

// By default, the `innerRef` will refer to the type of the `outerRef`
  const { outerRef, innerRef } = useVirtual<HTMLDivElement>();