React-table not showing newly fetched data when rendering

import {useMemo} from 'react'
import Axios from "axios"
import { useState,useEffect } from 'react';
import { useParams,Link } from 'react-router-dom';
import "./ViewRecords.css"
import Moment from "moment"
import { useTable,useGlobalFilter } from 'react-table'
import { GlobalFilter } from './GlobalFilter';



export default function ViewRecords({}) {
    const [records, setRecords] = useState([]);

 



    useEffect(() => {
        fetchRecords();
      }, []);

    const {username}=useParams()
  
   
   
    const cols = [
      {
        accessor: "land_owner",
        Header: "Owner Name"
      },
      {
        accessor: "land_size",
        Header: "Land Size (Acres)"
      },
      {
        accessor: "crop_name",
        Header: "Crop Name"
      },
      {
        accessor: "area_planted",
        Header: "Area Planted (Acres)"
      },
      {
        accessor: "expenses",
        Header: "Total Expenses (Rs)"
      },
      {
        accessor: "sales",
        Header: "Total Sales (Rs)"
      },
      {
        accessor: "date_planted",
        Header: "Date Planted",Cell: ({ value }) => {
          return Moment(value).format("LL")
        }
      },
      {
        accessor: "date_harvested",
        Header: "Date Harvested",Cell: ({ value }) => {
          return Moment(value).format("LL")
        }
      },
      
    ];
    const columns = useMemo(() => cols,[])
    const data = useMemo(() => records, [])
    const {
      getTableProps,
      getTableBodyProps,
      headerGroups,
      rows,
      prepareRow,
      state,
      setGlobalFilter,
    } = useTable({
      columns,
      data,
    }, useGlobalFilter)
  const {globalFilter}=state

  



    async function fetchRecords(){
        try{
            let response=await Axios.get(`http://localhost:5050/viewrecords/${username}`)
            if(response.data.status==="ok"){
             
              setRecords(response.data.data);

            }
            else if(response.data.status==="error"){
                alert(response.data.error)

            }
        }
        catch(err){
            alert(err)
        }

    }

   


   
  return (
    <>
     <div><div className="topnav">
  <Link to="/home">Home</Link>
  <Link to={`/Records`}>Add Records</Link>


</div></div>
        <h1> {username}'s Records</h1>
       
        <div className='item-container'>
        <GlobalFilter  filter={globalFilter} setFilter={setGlobalFilter}/>
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row)
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
              })}
            </tr>
          )
        })}
      </tbody>
    </table>
      </div>

    
    
    
    </>
  )
}

import {useState} from 'react'

export  function GlobalFilter({filter,setFilter}) {
    const [val,setVal]=useState(filter)
  return (
    <span>
        Search: {""}
        <input value={filter || ""}
        type="text"
        onChange={(e)=>{setVal(e.target.value);setFilter(e.target.value)}}
        placeholder="Search by any Heading..."
        />
    </span>
  )
}