PrimeReact DataTable dynamic columns from custom component

I want to render the columns dynamically which are given inside the childeren of the ParentComponent as CustomColumns like this:

import { Column } from 'primereact/column';
import { DataTable } from 'primereact/datatable';

function TetsPage(): JSX.Element {
    return (
        <ParentComponent>
            <CustomColumn field="name" header="Name" />
        </ParentComponent>
    );
}

export class ParentComponent extends React.Component<Props, State> {
    ................................
    render(): JSX.Element {        
        // result:   <Column field="name" header="Name" />
        // expected: <Column field="name" header="Name" sortable={true}/>
        return (
            <DataTable value={this.state.list}>
                {this.props.children}
            </DataTable>
        );
     }
}


export class CustomColumn extends React.Component<Props, State> {
    .................................
    render(): JSX.Element {
        return (
            <Column field={this.props.field} header={this.props.header} sortable={true} />
        )
    }
}

The problem is the DataTable component renders its own Column components instead of my CustomColumn which is customized/extended version of the Column component.

How can I get my CustomColumns rendered as dynamic columns inside the DataTable?

Here is the CodeSandbox