Error 404 when trying to load lots of img

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;