Components["List"] expects the ref to be an HTMLDivElement in Typescript [BUG]

[allanRubenstein]

Describe the bug When using typescript and a custom List, Typescript throws an error and says it expects an HTMLDivElement when you try to pass the ref to anything else, for example an unordered list.

Reproduction https://codesandbox.io/s/virtualized-custom-list-and-item-type-issue-g3irvh?file=/App.tsx:415-433

To Reproduce Steps to reproduce the behavior:

1. Create a component of type Components["List"] following the example on https://virtuoso.dev/customize-structure/
2. Try and pass the ref to an element other than a div
3. See error on the ref

Expected behavior The ref is able to be passed to any html element.

Screenshots

[petyosi]

True, do you think you can send a PR for that? Worth doing so for the Items, too.

[singhAmandeep007]

@allanRubenstein

Here is a work around

const VirtuosoList: Components["List"] = forwardRef((props, ref) => {
  return (
    <ul
      aria-labelledby="locations-list-label"
      aria-describedby="locations-list-description"
      ref={ref as React.RefObject<HTMLUListElement>}
      {...(props as React.HTMLAttributes<HTMLUListElement>)}
    >
      {props.children}
    </ul>
  );
});