Creating a r3f component Library but running into r3f hooks error!

[fakebrianho]

Hi all I've been running in a wall for hours now and I'm hoping someone with more experience can shed some light on what I'm doing wrong. I'm trying to create a simple component library for r3f components but even in the simplest components I'm getting an error that I can't use r3f hooks outside canvas elements. This is despite the fact that the imported component from my library is wrapped within a element. I'm thoroughly stumped as to why this is the case. This is a link to the paired down npm package package here is the github: github I saw someone had a similar issue earlier and solved it by upgrading their node version from 16 to 18 but I'm already on version 18. I have no clue as to what I'm doing wrong. When I look at react-drei it seems like they're using r3f hooks in their components and exporting them no problem.

Here is a sample sandbox with my library installed and the error displaying!
sandbox

Any and all insights would be greatly appreciated!