如何在用于React.js的Ag网格中获得响应列宽？

import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';

const GridExample = () => {
  const [columnWidths, setColumnWidths] = useState({});

  const onColumnResized = (event) => {
    const columnId = event.column.getColId();
    const newWidth = event.column.getActualWidth();
    setColumnWidths(prevWidths => ({
      ...prevWidths,
      [columnId]: newWidth
    }));
  };

  const columnDefs = [
    { headerName: 'Column 1', field: 'col1', width: columnWidths['col1'], resizable: true },
    { headerName: 'Column 2', field: 'col2', width: columnWidths['col2'], resizable: true },
    // Add more columns here
  ];

  return (
    <div className="ag-theme-alpine" style={{ height: '400px', width: '100%' }}>
      <AgGridReact
        columnDefs={columnDefs}
        onColumnResized={onColumnResized}
      />
    </div>
  );
};

export default GridExample;