Error 404 when trying to load lots of img - reactjs

Question

I'm build a side project for fun using create-react-app, in said project I'm fetching urls for <imgs>(700+). When I render all the <img> I get a lot of 404 errors, I thought this happened because I was trying to load too many so I tried rendering only 50 on the initial load but I still get a lot of 404 errors, also sometimes images stutter. I checked all the links that gave me a 404 error and they seem ok so, what's happening here?
I plan to load 50 more when the user gets to the bottom of the page using useEffect.
const Card = ({name, title, imageURL, categories, leaderSkill, passive, links}) => {
return(
<>
<img src={imageURL} title={`${name} ${title}`} alt={`${name} ${title}`} loading="lazy"/>
</>
)
}
export default Card;
import Card from './Card';
import { useEffect, useState } from 'react';
const Cards = ({ data }) => {
const [cards, setCards] = useState([]);
useEffect(()=>{
for(let i = 0; i < 25; i++){
setCards((cards)=>[...cards, data.shift()]);
}
},[])
return(
<div className="mt-[5vh] grid grid-cols-[repeat(5,_minmax(10px,_1fr))] lg:grid-cols-[repeat(10,_minmax(10px,_1fr))] gap-1">
{
cards.map(el => {
return(<Card key={el.id} name={el.name} title={el.title} imageURL={el.imageURL} categories={el.categories} leaderSkill={el.leaderSkill} passive={el.passive} links={el.links}/>);
})
}
</div>
)
}
export default Cards;