HTML aria attributes disappear when using asChild

[adatti]

Perhaps I'm misunderstanding how asChild is meant to be used, or forgetting something.

I have these two Tabs.List's: one is standard, the other is using asChild.

<Tabs.List>
  <Tabs.Trigger value="top">top</Tabs.Trigger>
  <Tabs.Trigger value="new">new</Tabs.Trigger>
  <Tabs.Trigger value="hot">hot</Tabs.Trigger>
</Tabs.List>

<Tabs.List asChild>
  <TabList>
    <Tabs.Trigger asChild value="top">
      <TabTrigger>top</TabTrigger>
    </Tabs.Trigger>
    <Tabs.Trigger asChild value="new">
      <TabTrigger>new</TabTrigger>
    </Tabs.Trigger>
    <Tabs.Trigger asChild value="hot">
      <TabTrigger>hot</TabTrigger>
    </Tabs.Trigger>
  </TabList>
</Tabs.List>

The TabList and TabTrigger are just some dummy components I want to later reuse in other places:

const TabList = ({ children }) => {
  return <div className={styles.list}>{children}</div>;
};

const TabTrigger = ({ children }) => {
  return <button className={styles.trigger}>{children}</button>;
};

But in the DOM, only the list that does not use asChild contains the necessary aria attributes:

[joaom00]

You need to spread the props across the component

const TabList = ({ children, ...props }) => {
  return <div {...props} className={styles.list} >{children}</div>;
};

And as a good practice fowardRef too