stories for compound components

[abaracedo]

Summary

I'd like to know how to add a compound component into a story, I tried a few things but none displays the information for the subcomponents.

Let's say that this is the compound component (CompComponent.tsx), something very basic:

function Root({ children }: { children: React.ReactNode }) {
  return <div>{ children }</div>
}

function Content({ children }: { children: React.ReactNode }) {
  return <div>{ children }</div>
}

export const CompComponent = {
  Root,
  Content,
}

For the story, that's what I have and it works, but I don't see the autodocs working and I don't know how to make work the subcomponents option.

import type { Meta, StoryObj } from '@storybook/react';
import { CompComponent } from './CompComponent';

const meta = Meta<typeof CompComponent.Root> = {
  component: CompComponent.Root,
  tags: ['autodocs'],
};

export default meta;

export const Default: StoryObj<typeof CompComponent.Root> = {
  render: () => (
    <CompComponent.Root>
      <CompComponent.Content>
        <h1>Lorem Ipsum</h1>
      <CompComponent.Content>
    </CompComponent.Root>
  )
}

When the story renders, going to the Docs renders the component and anything else. I'd like to know how to make it render the args and subcomponents in use.

Additional information

When I tried to set the subcomponents I get a TS error about Element is not assignable to type ComponentType<unknown>