react virtualize table - have bad performance

Question

I am using react virtualize table with many sub components in it and have very bad performance when rendering it. it gets more aweful after scrolling, clicking buttons...

<TableContainer className={classes.table}>
    <AutoSizer> 
      {({ height, width }) => (
        <Table
          height={height}
          width={width}
          rowHeight={64}
          headerHeight={84}
          rowCount={!isLoading ? tableRowsData.length : LOADING_ROWS_COUNT}
          gridStyle={{
            direction: 'inherit',
          }}
          rowGetter={({ index }) => getRowRow(index)}
          className={classes.table}
          rowClassName={getRowClassName}
          noRowsRenderer={noRowsRendererHandler}
          disableHeader={showEmptyState}
        >
          {Object.keys(headersConfig).map((key) => {
            return (
              <Column
                key={key}
                headerRenderer={({dataKey}) => headersConfig[dataKey].content}
                cellRenderer={({ cellData }) => cellData}
                dataKey={key}
                width={headersConfig[key].width}
              />
            )
          })}
        </Table>
      )}
    </AutoSizer>
  </TableContainer>

the headerConfig is an object with all the column components. how can I use this table wiser? how can I prevent many unnecessary re-renders? am I need to use the rowRenderer prop? if so, can I get an example or a link to understand the implementation? tnx cheers