Current behavior

Currently, we are assigning Ref to every React component in the project that uses the as prop. This approach leads to a messy implementation, as noted by @RobinMalfait, it's a hack.

Solution

I have a solution for this TypeScript issue. By utilizing the global HTMLElementTagNameMap, we can accurately type the refs. Although there are a few additional steps to ensure the solution is clean and reusable, the general approach will look like this:

*The screenshots are from the actual headlessui/react package, where I implemented a quick local solution.
*This approach also allows for passing in custom components, while including their respective props.

Conclusion

If there are no specific reasons for using a general type for all refs, I would like to implement this solution to improve this library.

I welcome any questions, comments, or suggestions!