Has anyone faced the annoying bug related to so-called dot components with 'use client' that requires additional redundant 'use client' inside page.tsx ? Most funny thing that for some components it doesn't require additional 'use client', for some it does.

I have a lot of dot components that are using Context API, useState and so on. Some of them require 'use client' inside page, some don't. Props that are passed to those components are completely serializable, primitives, not some functions.

Example:

test.tsx:
"use client";

import { createContext } from "react";

const SomeContext = createContext(...);

function Test() { ... }
function Item() { ... }
function Item2() { ... }

const ComposedTest = Object.assign(Test, { Item, Item2 });
export { ComposedTest as Test };

page.tsx:
// "use client"; <-- won't work without redundant 'use client'
import { Test } from "@/components/test";

export default async function Page() {
  return (
    <div>
      <Test>
        <Test.Item />
        <Test.Item2 />
      </Test>
    </div>
  );
}

I receive the following error despite having 'use client' inside component file:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

But if I add 'use client' inside page.tsx error disappears and everything works fine. I know that with 'use client' I still receiving a response with whole html markup, but it looks weird, isn't it?

Is there any chance to manage it? Or I just forced to use separate components like so instead:

export { 
  Test,
  TestItem,
  TestItem2
}