Why am I writing that I have too many renders [closed]

it's give me the next error: Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

what's the problem in this code?

import React, { useCallback, useEffect, useState } from 'react';
import Card from './Card';

export default function Home(props) {

    const [md, setMd] = useState();
    const [index, setIndex] = useState(0);

    const photos = [
        'photos/F9.jpeg', 'photos/F9.jpeg', 'photos/F9.jpeg', 'photos/F9.jpeg', 'photos/F9.jpeg'
    ]

    useEffect(() => {
        const fetchData = async () => {
            const Response = await fetch('MoviesDescription.json');
            const ResponseJson = await Response.json();
            console.log(ResponseJson.MovieDescription);
            setMd(ResponseJson.MovieDescription[index]);
        }
        fetchData()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    const array = [];

    for (let i = 0; i < 6; i++) {
        console.log(i)
        array.push(< Card src={photos[i]} MovieDescription={md} MovieName='The Fate of the Furious' key={i} />);
    }

    return (
        <div className='AllProduct'>
            {array.map((value) => {
                setIndex(index + 1)
                return value;
            })}
        </div>
    )
};