I am using ag-grid-react librray. I have defined a hook as follows:

import { useCallback, useEffect, useRef, useState } from "react";
import { AgGridReact } from "ag-grid-react";
import "ag-grid-charts-enterprise";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-quartz.css";
import { GridReadyEvent } from "ag-grid-charts-enterprise";
import { RhRichGridColumn, IOlympicData } from "../models";


export default function useAgGrid() {
  const gridRef = useRef<AgGridReact<IOlympicData[]>>(null);
  const columnShadowString = useRef<string>(null);
  const [rowData, setRowData] = useState<IOlympicData[]>();
  const [columnDefs, setColumnDefs] = useState<RhRichGridColumn[]>([
    { field: "athlete", minWidth: 200, fieldTitle: "athlete" },
    { field: "age", fieldTitle: "age" },
    { field: "country", minWidth: 200, fieldTitle: "country" },
    { field: "year", fieldTitle: "year" },
    { field: "date", minWidth: 180, fieldTitle: "date" },
    { field: "sport", minWidth: 200, fieldTitle: "sport" },
    { field: "gold", fieldTitle: "gold" },
    { field: "silver", fieldTitle: "silver" },
    { field: "bronze", fieldTitle: "bronze" },
    { field: "total", fieldTitle: "total" },
  ]);

  const updateColumnDefs = (newCols: RhRichGridColumn[]) => {
    setColumnDefs(newCols);
  };

  const getColumnShadow = () => {
    const columnsShadow = JSON.parse(columnShadowString.current!);
    if (!columnsShadow || !Array.isArray(columnsShadow)) return;
    const currentColumns = columnDefs;
    const result = columnsShadow.map((c) => {
      const currentCol = currentColumns.find((cs) => cs.field === c.field);
      if (!currentCol) return c;
      return Object.assign(currentCol, c);
    });
    return result as RhRichGridColumn[];
  };
  const setColumnShadow = () => {
    (columnShadowString.current as string) = JSON.stringify(
      columnDefs.map((c) => {
        return {
          field: c.field,
          suppressState: !!c.suppressState,
          hide: !!c.hide,
          width: c.width || null,
        };
      })
    );
  };

  const clear = () => {
    setColumnDefs(getColumnShadow()!);
  };
  const onGridReady = useCallback((params: GridReadyEvent) => {
    fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .then((resp) => resp.json())
      .then((data: IOlympicData[]) => setRowData(data));
  }, []);

  useEffect(() => {
    setColumnShadow();
  }, []);
  return {
    clear,
    onGridReady,
    setColumnShadow,
    getColumnShadow,
    updateColumnDefs,
    gridRef,
    rowData,
    columnDefs,
    setRowData,
  };
}

And my Model for component is defined as:

export interface IOlympicData {
    athlete: string;
    age: number;
    country: string;
    year: number;
    date: string;
    sport: string;
    gold: number;
    silver: number;
    bronze: number;
    total: number;
  }
  
  export interface  RhRichGridColumnBase {
    field: string;
  }
  
  export interface RhRichGridColumnState extends RhRichGridColumnBase {
    hide?: boolean | null;
  }
  
  export interface RhRichGridColumn extends RhRichGridColumnState {
    fieldTitle: string;
    resizable?: boolean;
    sortable?: boolean;
    rowDragable?: boolean;
    pinned?: string;
    formatterName?: any;
    width?: number;
    minWidth?: number;
    maxWidth?: number;
    footerCalc?: any;
    footerCalcParams?: unknown;
    cellRenderer?: unknown;
    cellRendererParams?: unknown;
    headerClass?: string;
    cellClass?: string;
    sort?: "asc" | "desc" | null;
    suppressState?: boolean;
    sortedBy?: string;
    fieldTitleTooltip?: string;
    checkboxSelection?: boolean;
  
  }

I have also defined my models as follows:

Now, when i use my hook in main component as follows:

import { AgGridReact } from "ag-grid-react";
import "ag-grid-charts-enterprise";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-quartz.css";
import GridColumnManager from "./GridColumnManager";
import { gridDefaultOptions } from "./config/constants";
import { AG_GRID_LOCALE_FA } from "./config/ag-grid-fa";

import useAgGrid from "./hooks/useAgGrid";

const GridExample = () => {
  const { gridRef, rowData, columnDefs, onGridReady, updateColumnDefs, clear } =
    useAgGrid();

  return (
    <div style={{ display: "flex", flexDirection: "column", width: "100%" }}>
      <div className={"ag-theme-alpine"}>
        <AgGridReact
          ref={gridRef}
          localeText={AG_GRID_LOCALE_FA}
          rowData={rowData}
          columnDefs={columnDefs}
          rowSelection={"multiple"}
          reactiveCustomComponents
          onGridReady={onGridReady}
          gridOptions={gridDefaultOptions.gridOptions}
        />
      </div>
    </div>
  );
};
export default GridExample;

The following error of typescript is displayed for AgGridReact:

No overload matches this call.
Overload 2 of 2, ‘(props: AgGridReactProps | AgReactUiProps, context: any): AgGridReact’, gave the following error.
Type ‘RhRichGridColumn[]’ is not assignable to type ‘(ColDef<any, any> | ColGroupDef)[]’.
Overload 2 of 2, ‘(props: AgGridReactProps | AgReactUiProps, context: any): AgGridReact’, gave the following error.
Type ‘(params: GridReadyEvent) => void’ is not assignable to type ‘(event: GridReadyEvent<any, any>) => void’.ts(2769)
gridOptions.d.ts(169, 5): The expected type comes from property ‘columnDefs’ which is declared here on type ‘IntrinsicAttributes & (IntrinsicClassAttributes<AgGridReact> & Readonly<AgGridReactProps | AgReactUiProps<…>>)’

How can solve it?