### 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. <img width="402" alt="Screenshot 2024-09-19 at 20 46 19" src="https://github.com/user-attachments/assets/5b8bd20f-179b-41e6-83d3-965a86913175"> ### 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: <img width="448" alt="Screenshot 2024-09-19 at 20 45 01" src="https://github.com/user-attachments/assets/ea15633d-12a9-4699-a5f9-78bea2d4549a"> <img width="456" alt="Screenshot 2024-09-19 at 20 45 11" src="https://github.com/user-attachments/assets/84968834-54a7-44ef-9079-5164dcdfc13a"> *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!