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>
  );
});

[aPinix]

@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>
  );
});

I can't seem to use this, at least in the version "react-virtuoso": "^4.10.4".

I'm using VirtuosoGrid by the way.

I get an error "Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops."

Can anybody help? Thanks in advance ;)