Examples pages syntax highlighter removes . from compound JSX components

[tulup-conner]

Describe the bug
Compound components have their . separator removed by the syntax highlighter used for example pages.

To be clear, it is still valid to import ButtonGroup directly, but the examples pages use Button.Group.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://flowbite-react.com/#/button-group
2. Notice the Default example produces the following syntax highlighted code:

<ButtonGroup>
  <ButtonComponent color="alternative">
    Profile
  </ButtonComponent>
  <ButtonComponent color="alternative">
    Settings
  </ButtonComponent>
  <ButtonComponent color="alternative">
    Messages
  </ButtonComponent>
</ButtonGroup>

Expected behavior
The code should look like:

<Button.Group>
  <Button color="alternative">Profile</Button>
  <Button color="alternative">Settings</Button>
  <Button color="alternative">Messages</Button>
</Button.Group>

Screenshots
n/a

Desktop (please complete the following information):
n/a

Smartphone (please complete the following information):
n/a

Additional context
n/a

[tulup-conner]

I didn't even notice this initially, but it looks like it also incorrectly resolves the name of Button to ButtonComponent.

[rluders]

Yep. All components sub-components must have the property displayName attached.
Here is a good example:

flowbite-react/src/components/Navbar/index.tsx

Line 44 in d056bec

NavbarComponent.displayName = 'Navbar';

[tulup-conner]

I can confirm adding the displayName totally fixes this- so I think we just need to add a displayName to existing components and this should be resolved. I can take that on.