reactjs – How to create custom intrinsic elements in React

I want to know how to create custom intrinsic elements in React (such as in react three fiber).
Suppose i have a simple component

const Book = () => <div>book!</div>

And i want to use this just like web-components,

<book />

That is: 1) lowercase component, 2) doesnt need to be imported as react renderer recognizes it and maps to Book func component

I did my research and it seems R3F uses reconciler lib of react to tinker with the default react renderer but r3f’s source code is too complex.

Does anyone have any articles/tutorials or example of how i can create such intrinsic components in react?

I tried to check how it’s done in R3F but the source code is too complex as it hugely references webgl and three js