refresh Cells with AG grid With react use cellRenderer and another component function

refresh Cells with AG grid With react use cellRenderer and another component function ...

I use AG grid to make grid in my website and need to refresh cells after update or delete function in my component

import { React, useEffect, useState } from 'react'
import { NavLink, useLocation, useParams } from 'react-router-dom'
import { motion } from 'framer-motion'

import { AgGridReact } from 'ag-grid-react'
import 'ag-grid-community/styles/ag-grid.css'
import 'ag-grid-community/styles/ag-theme-alpine.css'

const gotoproject = (p, { refreshcell }) => {
  var projectid = p.data.project.id
  let user = JSON.parse(sessionStorage.getItem('userInfo'))
  var adminid = user.id
  console.log(p)

  function getProjectid() {
    var options = {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        Origin: '',
        Connection: 'keep-alive',
      },
      body: JSON.stringify({
        grant_type: 'client_credentials',
        AdminID: adminid,
      }),
    }
    fetch(
      'https://project.com/api/approved/' +
        projectid,
      options,
    )
      .then(function (res) {
        return res.json()
      })
      .then(function (resJson) {
        return resJson
      })
  }

  async function deleteproject() {
    var options = {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        Origin: '',
        Connection: 'keep-alive',
      },
      body: JSON.stringify({
        grant_type: 'client_credentials',
        AdminID: adminid,
      }),
    }
    await fetch(
      'https://project.com/api/delete/' +
        projectid,
      options,
    )
      .then(function (res) {
        return res.json()
      })
      .then(function (resJson) {
        return resJson
      })
    p.api.refreshCells()
  }
  return (
    <>
      <button className="buttoninview" onClick={getProjectid}>
        view
      </button>
      <button className="buttoninedit" onClick={getProjectid}>
        approve
      </button>
      <button className="buttonindelete" onClick={deleteproject}>
        refus
      </button>
    </>
  )
}
const gettime = (p) => {
  var date = new Date(p.data.project.CrateDateTime)
  var year = date.toLocaleString('default', { year: 'numeric' })
  var month = date.toLocaleString('default', { month: '2-digit' })
  var day = date.toLocaleString('default', { day: '2-digit' })
  var hour = date.toLocaleString('default', { h: '2-digit' })
  var minute = date.toLocaleString('default', { minute: '2-digit' })

  var formattedDate = day + '-' + month + '-' + year
  return hour
}
const gettimeedited = (p) => {
  var date = new Date(p.data.project.UpdateDateTime)
  var year = date.toLocaleString('default', { year: 'numeric' })
  var month = date.toLocaleString('default', { month: '2-digit' })
  var day = date.toLocaleString('default', { day: '2-digit' })
  var hour = date.toLocaleString('default', { h: '2-digit' })
  var minute = date.toLocaleString('default', { minute: '2-digit' })

  var formattedDate =
    day + '-' + month + '-' + year + ' | ' + hour + ' : ' + minute + ' '
  return hour
}

export default function DataGridDemo(refreshcell) {
  const [projects, getProjects] = useState([])
  const rowData = projects

  async function getProjectsfun() {
    let result = await fetch(
      'https://project.com/api/view/all',
    )
    result = await result.json()
    getProjects(result)
  }
  useEffect(() => {
    getProjectsfun()
  }, [])

  const columnDefs = [
    {
      field: 'project.id',
      headerName: 'project number',
      filter: true,
      maxWidth: 200,
      sortable: true,
    },
    // Using dot notation to access nested property
    {
      field: 'project.ProjectNameAR',
      headerName: 'project name',
      filter: 'agTextColumnFilter',
      sortable: true,
    },
    {
      field: 'project',
      headerName: ' ',
      cellRenderer: gotoproject,
      minWidth: 300,
    },
  ]
  function refreshcell() {
    getProjectsfun()
  }
  // var t = setInterval(refreshcell, 3000)
  return (
    <>
      <motion.div
        className="CRMPAGE"
        initial={{ width: '0' }}
        animate={{ width: '100%' }}
        exit={{ x: window.innerWidth, transaction: { duration: 0.1 } }}
      >
        {projects ? (
          <>
            <div>
              <div style={{ height: '90vh' }} className="ag-theme-alpine">
                {/* <DataGrid columns={columns} rowHeight={rowHeight} rows={rows} /> */}
                <AgGridReact
                  style={{ width: '100%', height: '100%;' }}
                  rowData={rowData}
                  enableRtl={true}
                  columnDefs={columnDefs}
                  animateRows={true}
                  rowSelection={'multiple'}
                ></AgGridReact>
              </div>
            </div>
          </>
        ) : (
          <>
            {/* <DataGrid columns={columns} rowHeight={rowHeight} rows={rows} /> */}
            <div>
              <div style={{ height: '90vh' }} className="ag-theme-alpine">
                {/* <DataGrid columns={columns} rowHeight={rowHeight} rows={rows} /> */}
                <AgGridReact
                  style={{ width: '100%', height: '100%;' }}
                  rowData={rowData}
                  enableRtl={true}
                  columnDefs={columnDefs}
                  animateRows={true}
                  rowSelection={'multiple'}
                ></AgGridReact>
              </div>
            </div>
          </>
        )}
      </motion.div>
    </>
  )
}

I try to make it by ag-grid api but it's didnt work wih me ~ please help me to refresh it without . enter image description here