Let's say I have static JSX content that I want to reuse across my website.

const Contacts = <div>
    <div>+1 111 11 11</div>
    <div>company at server.com</div>
</div>

Of course, I can't render it as <Contacts />. I however can render it as {Contacts}.

Can you please tell me why should I add boilerplate code to this JSX constant to be able to render it like <Contacts />?

I'm curious about the technical why part. What prevented React developers to enable it?