UnderlinePanels fail to render when used in RSC

[joshblack]

When using a component like UnderlinePanels in an RSC context (like Next.js) you end up with it rendering incorrectly, for example:

import {UnderlinePanels} from '@primer/react/experimental'

export default function Example() {
  return (
    <main>
      <h1>Example</h1>
      <UnderlinePanels>
        <UnderlinePanels.Tab>Tab one</UnderlinePanels.Tab>
        <UnderlinePanels.Panel>Panel one</UnderlinePanels.Panel>
        <UnderlinePanels.Tab>Tab two</UnderlinePanels.Tab>
        <UnderlinePanels.Panel>Panel two</UnderlinePanels.Panel>
        <UnderlinePanels.Tab>Tab three</UnderlinePanels.Tab>
        <UnderlinePanels.Panel>Panel three</UnderlinePanels.Panel>
      </UnderlinePanels>
    </main>
  )
}

Will produce an empty DOM tree that has no visible content (like the tabs or panels)

It is fixed when 'use client' is added to the file on the caller side.

Link to codesandbox: https://codesandbox.io/p/devbox/exciting-mestorf-t8ktml

Impacted areas

primer-docs, primer-query