Реорганизовать экспорт в пространства имен или модули с помощью TypeScript и React

Question

Я создал небольшую библиотеку компонентов с React и TypeScript. Теперь я хочу реорганизовать мои экспортированные компоненты в пространства имен, как я видел это в ant.design .

В ant.design вы можете сделать что-то вроде:

import { Table } from 'antd';

<Table>
    <Table.Column ... />
</Table>

Я хочу сделать то же самое, потому что из-за контекста некоторые мои компоненты должны быть потомками других. В настоящее время это выглядит так:

import { DSVImport, DSVTablePreview, DSVTextareaInput } from './';

<DSVImport columns={columns}>
  <DSVTextareaInput />
  <DSVTablePreview />
</DSVImport>

Это делается следующим образом: index.ts:

// composite
export * from './DSVImport';

// components
export * from './components/inputs/DSVTextareaInput';
export * from './components/previews/DSVTablePreview';

// models
export * from './models/column';

Как добиться чего-то подобного (следуя рекомендациям eslint)?

import { DSVImport } from './';

<DSVImport columns={columns}>
  <DSVImport.DSVTextareaInput />
  <DSVImport.DSVTablePreview />
</DSVImport>

Tl; dr

То, что я пробовал до сих пор, изучая из источника муравья.

import { DSVTextareaInput } from './components/inputs/DSVTextareaInput';

function DSVImport() {}

DSVImport.TextareaInput = DSVTextareaInput;

export default DSVImport;

Это не выдает ошибку, но DSVImport необходимо быть экспортом по умолчанию. Также DSVImport является функцией, а не компонентом.