Why radix-UI headless component render internal components if they're not mounted

/* ------- page/book.tsx ------- */
// ssr
// lazy import 'BookDropdownComponent' component

function Page() {
  return (
    <>
      // ....
      <BookDropdownComponent />
      // ...
    </>
  )
}

/* ------- component/BookDropdownComponent.tsx ------- */
'use client';
// lazy import 'BookDropdownContent' component

function BookDropdownComponent() {
  return (
    <DropdownMenu>
      <Trigger>
        Button
      </Trigger>

      <MenuContent>
        <BookDropdownContent />
      </MenuContent>
    </DropdownMenu>
  )
}