link button not working second when i added new maincategory, it is rendering same component intead of going path

[dineshbhati61102]

import React, { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import LeftNav from './LeftNav'
import { useDispatch, useSelector } from "react-redux"
import { GetMaincategoryAction } from "../../Store/Actions/MaincategoryAction"

const AdminMaincategories = () => {
const [Maicategories, setMaicategories] = useState([]);
const dispatch = useDispatch();
const { data, error } = useSelector(state => state.MaincategoryStateData);

function getAPIData(){
dispatch(GetMaincategoryAction())
if(data.length)
setMaicategories(data)
}

useEffect(() => {
getAPIData()
}, [data.length])

return (
<>

    <div className='col-md-10 table-responsive'>
      <h2 className='text-center text-primary'>Maincategories</h2>
      <Link to='/admin-add-maincategory' className='btn btn-primary text-light py-2 px-3 mb-2'>Add New</Link>

      <table className='table table-bordered'>
        <thead className='bg-primary text-light'>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Edit</th>
            <th>Delete</th>

          </tr>
        </thead>
        <tbody>

          {error ? <h5 className='alert alert-danger text-center mt-5'>{error}</h5> :

          Array.isArray(Maicategories) && Maicategories.map((elem, index) => {
              return <tr key={index}>
                <td>{elem._id}</td>
                <td>{elem.name}</td>
                <td> <Link to="/admin-update-maincategory" className='btn btn-primary text-light py-2 px-3 mb-2'>Update</Link></td>
                <td> <button className='btn btn-primary text-light'>Delete</button></td>
              </tr>
            })}

        </tbody>
      </table>
    </div>
  </div>
</>

)
}

export default AdminMaincategories