How to solve 'too many requests' error , react api ?

i have react laravel project and i get item details through api. when i get the item details, the item category is a number so i do the following to display the category name not the category number, but after loading more and more items i get the 'too many requests' error. I wonder how i can solve this error and if the following is the best way to do that job. this is where i display the item:

{ loading ? (<p className='spinner-border gray mx-auto'></p>) : 
data && data.length>0 ? data.map((e, index)=>(
  <div key={e.item_id} className='col-xs-12 col-md-6 col-lg-4 main2 main-prof'>
   <img onClick={(e)=>{enlargeFun(e.target.src)}} id={e.item_id}  key={index} 
 src={baseURLImg+e.photo} alt={e.title} 
className='w-100 h-75 mx-auto d-block img'/> 
                              
                                <ShowCat catId={e.CAT_ID} />
                             
                                <div>{e.title}</div>
                                
                            </div>
                        )) : (<p> no items</p>)
                    }

this is where i fetch the item category name:

import { useEffect,useState } from 'react';
import {http} from '../axios/axiosGlobal'
import   './show.css'



const ShowCat=({catId})=>{
   
    const [cats, setCats] = useState('')
    
    const getCat=async(cat)=>{
       //get category name
      const res=await http.get('ads/cat/'+cat);
       setCats(res.data.name)
    }
    
    useEffect(() => { 
      
      getCat(catId);

    }, [])
  
    
    return (
      <p>{cats} </p>
    )
  }
  export default ShowCat