Missing "key" prop for element in iterator in next,js typescript

This is my portfolio web app, i have made different components but when i am trying 'npm run build' it gives the following error : Missing "key" prop for element in iterator, can anyone please help me out i tried adding but it still says same the code:

import React from 'react'
import {motion} from 'framer-motion'
import { Project } from '../typings';
import { urlFor } from '../sanity';
import Image from 'next/image'

type Props = {
    projects: Project[]
}

function Projects({ projects }: Props) {
 
  return (
        <div className='h-screen relative flex overflow-hidden flex-col text-left md:flex-row max-w-full justify-evenly mx-auto items-center z-0'>
        <h3 className='absolute top-24 uppercase tracking-[20px] text-gray-500 text-2xl'>
        Projects
        </h3>

  (((error on this line))))  <div className=' relative w-full flex overflow-x-scroll overflow-y-hidden snap-x snap-mandatory z-20 scrollbar scrollbar-track-gray-400/20 scrollbar-thumb-[#f7ab0a]/80'>
        {projects?.map((project, i) => (
        <div className='w-screen flex-shrink-0 snap-center flex flex-col space-y-5 items-center justify-center p-20 md:p-44 h-screen'>
            <motion.img 
            initial={{
                y: -300,
                opacity: 0,
            }}
            transition={{ duration: 1.2}}
            whileInView= {{ opacity: 1, y: 0}}
            viewport= {{ once: true}}
            
            
            src={urlFor(project?.image).url()} alt='' />
            <div className='space-y-10 px-0 md:px-10 mx-w-6xl'>
                    <h4 className='text-4xl font-semibold text-center'>
                        <span className='underline decoration-[#f7ab0a]/50'>Case Study {i+1} of {projects.length}:</span> {''}
                        {project?.title}
                    </h4>
                    <div className='flex items-center space-x-2 justify-center'>
                        {project?.technologies.map((technology) => (
                        <Image className='h-10 w-10'
                        key={technology._id} 
                        src={urlFor(technology.image).url()}
                        alt=''
                        />    
                        )
                        )}
                    </div>
                        <p className=' text-lg text-center md:text-left'>
                        {project?.summary}
                       </p>
            </div>
        </div>

       
       ))}
    </div>


        <div className=' w-full absolute top-[30%] bg-[#f7ab0a]/10 left-0 h-[500px] -skew-y-12'/>
        </div>
  )
}

export default Projects

Api is giving full response, website running fully functional on localhost 3000

Solution

Keys are used to help the renderer determine what has been updated/changed. The first JSX element inside a map should always contain a key. The index of an array makes for an easy map, however this can be problematic if your array will be changing.

Assuming this is not the case, you can use the element's index in the array as a key. To do so, change the line that reads

        <div className='w-screen flex-shrink-0 snap-center flex flex-col space-y-5 items-center justify-center p-20 md:p-44 h-screen'>

to the following:

        <div className='w-screen flex-shrink-0 snap-center flex flex-col space-y-5 items-center justify-center p-20 md:p-44 h-screen' key={i}>

If your elements may be changing, a better solution would be to have a unique ID for each project. This ID could then be used as the key.