Column expander from primereact is not working as expected

Question

I am creating a reusable custom data table using prime react.

<DataTable
      value={dataToDisplayPaginated}
      stripedRows
      resizableColumns
      frozenWidth='300px'
      scrollable
      expandedRows={this.state.expandedRows}
      onRowToggle={(e) => this.setState({...this.state, expandedRows: e.data as any as []})}
      className="custom-data-table-scroll p-datatable-scrollable"
      style={{ height: this.state.height, width: this.state.width }}
      >
        {checkbox && (
          <Column
          key="checkbox"
          header={
            <Checkbox
              className="custom-checkbox"
              checked={selectAll}
              onChange={() => this.toggleAllRows()}
            />
          }
          body={(rowData) => (
            <Checkbox
              className="custom-checkbox"
              checked={selectedRows.some((row) => row.id === rowData.id)}
              onChange={() => this.toggleRow(rowData)}
            />
          )}
          className="p-frozen-column"
        />
        )}
        <Column expander />
        {React.Children.map(this.props.children, (child: ReactNode, index) => {
        if (React.isValidElement<ColumnProps>(child)) {
          const { frozen } = child.props;
          return React.cloneElement(child as React.ReactElement<ColumnProps>, {
            header: (
            <>
            {child.props.header}{' '}
            {child.props.sortable &&
            this.renderSortButtons(child.props.field || '', data)}
            {child.props.filter &&
            this.renderFilterIcon(child.props.field || '')}
            </>
            ),
            frozen,
            style: { minWidth: '200px' },
            className: `font-bold ${frozen ? 'p-frozen-column' : ''}`,
          });
        }
        return null;
        })}
        </DataTable>

This is my Custom data table. I am using it in App component as

 <CustomDataTable 
          data={productsData}
          checkbox={true}
          sortField={this.state.sortField}
          sortOrder={this.state.sortOrder}
          onSortChange={this.handleSortChange}
          onSelectionChange={this.handleSelectionChange}
          scrollHeight={this.state.scrollHeight}
          scrollWidth={this.state.scrollWidth}
          scrollable={true}
          height="40%"
          width="100%"
          globalSearch={true} 
          resetIcon={true}   
          >
          <Column
          field={'id'}
          header={this.getHeader('id')} 
          body={this.IdRenderer}
          sortable={true}
          filter
          resizeable
          expander
          />

Like this. My expectation is like if I pass the expander in column component in App then I should be able to expand that row.

As it is not working, I have used 'expander' prop from child in custom data table.

{React.Children.map(this.props.children, (child: ReactNode, index) => {
        if (React.isValidElement<ColumnProps>(child)) {
          const { expander } = child.props;
          if (expander) {
          return (
            <Column expander style={{ width: '3em' }} />
          );
        }

It is giving me the expander icon, but whatever column I want to expand, it is showing expander on that that column data. Another method I tried is in the code I attached, I passed '' in custom data table only. But it is giving expander for all the tables, it is not counting the expander in my id column. If it succeeds I want to show child data on expanding the row.

id: [
                {id: 1000},
                {id: 2000}
            ],

Initially I want to show id value as 1000, on expanding I want to show 2000 in the expanded container. Please help me with this. Thanks in advance!