How to get the all resizable columns width from PrimeReact Datatable

Question

I'm using primereact version "^8.0.0" in my react project. and using DataTable in functional components.

this is my datatable structure

 <div className="card">
      <DataTable
    size="small"
    value={products}
    selectionMode="multiple" selection={selectedProducts} onSelectionChange={e => setSelectedProducts(e.value)} dataKey="id"
    scrollable scrollHeight="600px" scrollDirection="both" className="mt-3"
    paginator paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
    currentPageReportTemplate="Showing {first} to {last} of {totalRecords}" rows={10} rowsPerPageOptions={[10, 20, 50]}
    resizableColumns columnResizeMode="expand" showGridlines

  >
    <Column field="id" header="Id" style={{ flexGrow: 1, flexBasis: '100px', position: "sticky" }} sortable frozen ></Column>
    <Column field="name" header="Name" style={{ flexGrow: 1, flexBasis: '200px', position: "sticky" }} sortable frozen></Column>
    <Column field="country.name" header="Country" style={{ flexGrow: 1, flexBasis: '200px' }} sortable></Column>
    <Column field="date" header="Date" style={{ flexGrow: 1, flexBasis: '200px' }} sortable></Column>
    <Column field="company" header="Company" style={{ flexGrow: 1, flexBasis: '400px' }} sortable></Column>
    <Column field="status" header="Status" style={{ flexGrow: 1, flexBasis: '200px' }} sortable></Column>
    <Column field="activity" header="Activity" style={{ flexGrow: 1, flexBasis: '200px' }} sortable></Column>
    <Column field="representative.name" header="Representative" style={{ flexGrow: 1, flexBasis: '200px' }} sortable></Column>
    <Column field="balance" header="Balance" style={{ flexGrow: 1, flexBasis: '120px' }} sortable></Column>
  </DataTable>
</div>