How to create a react layout component without using props?

I’ve seen the following pattern a lot in primitive components (like Radix UI) where layouts are rendered as custom children components. For example:

<List.Root>
    <List.Title>Hello!</List.Title>
    <List.Items>
        <List.Item>Item 1</List.Item>
        <List.Item>Item 2</List.Item>
        <List.Item>Item 3</List.Item>
    <List.Items>
<List.Root>

This will end up rendering some custom layout with styles, etc, like the following:

<div>
    <span>Hello!</span>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

My question is: what even is the name of this pattern, and how would I achieve it using functional components? How would I pass states between each of the elements? I’ve looked at the source for some of the Radix components, but they all use some sort of abstracted primitives, and a lot of Contexts. The example above is pretty simple, but you can imagine each Item having some custom styling and positioning, and not just returning a <li>.

Any help would be appreciated!