我试图在这里实现文档中描述的行自动高度功能：

https://www.ag-grid.com/javascript-grid-row-height/#auto-row-height

但是，在我的情况下它似乎不起作用。对我来说发生的事情是文本根本没有换行，它只是为每一行创建一个长行。

我已经尝试将代码尽可能地适应我自己的应用程序，但也许我错过了什么？如果您能查看我的代码并告诉我是否缺少某些内容，我将不胜感激：

const defaultColDefProperties = {
    flex: 1,
    editable: true,
    resizable: true,
    floatingFilter: true,
    filter: true,
    wrapText: true,
    autoHeight: true,
  };

const columnDefinition = [{headerName: "Key", field: "Key"},
                          {headerName: "Value", field: "Value"}];

const ConfigurationDataGrid = (props) =>
{                                                                           
    const [gridRowData, setGridRowData] = useState([]);  
    const gridApi = useRef(null);
    
    useEffect(async () =>
    {
      const getRowData = async () =>
      {
        let rowData = await WebApi.getRowData();     
        setGridRowData(rowData);   
      }
      await getRowData();
    },[]);

    const onGridReady = params => 
    {
      gridApi.current = params.api;
    }

    const onColumnResized = (params) => 
    {
      params.api.resetRowHeights();
    }
  
    const onColumnVisible = (params) => 
    {
      params.api.resetRowHeights();
    }

    return (
          <div style={{ width: '100%', height: '100%' }}>
              <UxDataGrid 
                id='datagrid' 
                className='custom-datagrid' 
                onGridReady={onGridReady}
                columnDefs={columnDefinition} 
                rowData={gridRowData} 
                defaultColDef={defaultColDefProperties}
                onColumnResized={onColumnResized}
                onColumnVisible={onColumnVisible}/>
          </div>
  );
}

css类：

    .custom-datagrid {
    height: 100%;
    border: 0px;
    margin-top: 0px !important;
    margin-right: 0px !important;
    margin-left: 0px !important;
  }

我错过了什么？