[joy-ui][Tooltip] Not working with custom sub-components

Steps to reproduce

import {Tooltip} from '@mui/joy';

export function TooltipBug() {
  return <>
    <Tooltip title="foo">
      <div>f</div>
    </Tooltip>
    <Tooltip title="bar">
      <CustomComponent />
    </Tooltip>
  </>;
}

function CustomComponent() {
  return <div>b</div>;
}

shows "foo" but does not show "bar".

Current behavior

Yields:

<div aria-label="foo" class="">f</div>
<div>b</div>

Expected behavior

<div aria-label="foo" class="">f</div>
<div aria-label="bar" class="">b</div>

Context

i want to use components

Your environment

Browser: Mozilla Firefox 126.0.1

Search keywords: tooltip