Properly typing lazy loaded React component with nested components

I have <List /> and <Item /> components. I want to be able to access the <Item /> using <List.Item />. Normally this could be accomplished as such:

const Item: React.FC = () => { ... };

const List: React.FC & { Item: typeof Item } = () => { ... };

List.Item = Item;

When I import this normally using import List from './List', everything works and I get the right typings.

import List from './List';

...

<List>
  <List.Item .../>
</List>

But when the component is lazy loaded, the structure breaks:

const List = React.lazy(() => import('./List'));

...

<List>
  <List.Item ... />
//      ^
//      Property 'Item' does not exist on type 'LazyExoticComponent<FC<{}> & { Item: FC<{}>; }>'

When loading the component lazily, it gets wrapped inside LazyExoticComponent and the Item property is not visible any more. How could I write the List component in such a way that it works even when loaded lazily?