Why am I getting an error when building my Ag-Grid in npm run build?

I am rather new to nextjs and web in general as my experience is mostly with compiled languages. I am trying to build a web app using Ag-Grid and took inspiration from an existing example I took from a public github that I succesfully built and run: https://github.com/zealousAnemone/ag-grid-next-app/blob/main/pages/index.js

However, after taking that code and making few changes(import router from next/navigation and change ag-grid css imports to new location) my npm run build still fails.

`'use client'
import { useState, useEffect, useCallback, useRef } from 'react';
import { useRouter } from 'next/navigation';
import { AgGridReact } from 'ag-grid-react';

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const Home = () => {
  const gridRef = useRef();
  const router = useRouter();
  const [rowData, setRowData] = useState([]);

  useEffect(() => {
    fetch('../api/staff')
      .then((response) => response.json())
      .then((data) => setRowData(data.rows));
  }, []);

  const onSelectionChanged = useCallback(() => {
  }, []);

  const defaultColDef = {
    resizable: true,
    sortable: true,
  };

  const [columnDefs] = useState([
    { headerName: 'First Name', field: 'first_name' },
    { headerName: 'Last Name', field: 'last_name' },
    { headerName: 'Job Title', field: 'job_title' },
    { field: 'office' },
    { field: 'email' },
    { field: 'phone' },
  ]);

  return (
    <div className="ag-theme-alpine" style={{ height: '600px' }}>
      <AgGridReact
        id="staff_grid"
        ref={gridRef}
        rowData={rowData}
        defaultColDef={defaultColDef}
        columnDefs={columnDefs}
        onSelectionChanged={onSelectionChanged}
        rowSelection={'single'}
        style={{ height: '100%', width: '100%' }}
      ></AgGridReact>
    </div>
  );
};

export default Home;`

build error I get is here:

./app/dashboard/AgGrid/page.tsx:39:7
Type error: No overload matches this call.
  Overload 2 of 2, '(props: AgGridReactProps<never> | AgReactUiProps<never>, context: any): AgGridReact<never>', gave the following error.
    Type 'MutableRefObject<undefined>' is not assignable to type 'LegacyRef<AgGridReact<never>> | undefined'.
  Overload 2 of 2, '(props: AgGridReactProps<never> | AgReactUiProps<never>, context: any): AgGridReact<never>', gave the following error.
    Type '({ headerName: string; field: string; } | { field: string; headerName?: undefined; })[]' is not assignable to type '(ColDef<never, any> | ColGroupDef<never>)[]'.

  37 |   return (
  38 |     <div className="ag-theme-alpine" style={{ height: '600px' }}>
> 39 |       <AgGridReact
     |       ^
  40 |         id="staff_grid"
  41 |         ref={gridRef}
  42 |         rowData={rowData}

Problem :

Why am I getting an error when building my Ag-Grid in npm run build?

Possible cause :

const gridRef = useRef();

Possible Solutions :

1. const gridRef = useRef(null);
2. As your code is in TypeScript they expect you to provide interface, go through this example here Generic Type Example

Please Read :

• TypeScript Generics : https://www.ag-grid.com/react-data-grid/typescript-generics/#top

If you have any doubts, then please leave a comment (I will update answer as necessary)