Can't find the missing key for the child - reactjs

Question

novice developer here.
I can't seem to solve this missing key error. I've used the key prop for each time i've mapped but I can't seem to find the child with the missing key. please help!
I've tried putting key props in some of the child divs but still no success.
<h2 className="head-text">Skills & Experience</h2>
<div className="app__skills-container">
<motion.div className="app__skills-list">
{skills.map((skill) => (
<motion.div
whileInView={{ opacity: [0, 1] }}
transition={{ duration: 0.5 }}
className="app__skills-item app__flex"
key={skill.name}
>
<div
className="app__flex"
style={{ backgroundColor: skill.bgColor }}
>
<img src={urlFor(skill.icon)} alt={skill.name}/>
</div>
<p className="p-text">{skill.name}</p>
</motion.div>
))}
</motion.div>
<motion.div className="app__skills-exp">
{experience.map((experience) => (
<motion.div className="app__skills-exp-item" key={experience.year}>
<div className="app__skills-exp-year">
<p className="bold-text">{experience.year}</p>
</div>
<motion.div className="app__skills-exp-works">
{experience.works.map((work) => (
<>
<motion.div
whileInView={{ opacity: [0, 1] }}
transition={{ duration: 0.5 }}
className="app__skills-exp-work"
data-tip
data-for={work.name}
key={work.name}
>
<h4 className="bold-text">{work.name}</h4>
<p className="p-text">{work.company}</p>
</motion.div>
<ReactTooltip
id={work.name}
effect="solid"
arrowColor="#fff"
className="skills-tooltip"
>
{work.desc}
</ReactTooltip>
</>
))}
</motion.div>
</motion.div>
))}
</motion.div>
</div>
</>
);
};
export default AppWrap(
MotionWrap(Skills, 'app__skills'),
'skills', "app__whitebg"
);

Answer 1

Error is with <>...</> items in your
{experience.works.map((work) => (
<>
<motion.div key={work.name}>
{/* ... */}
</motion.div>
</>
))}
They are top-level DOM nodes inside of your map function, so they should have the key, not the child motion.div.
But they cant have key, so you will need to use Fragments. They are just the same.
import {Fragment} from "react";
{experience.works.map((work) => (
<Fragment key={work.name}>
<motion.div
whileInView={{ opacity: [0, 1] }}
transition={{ duration: 0.5 }}
className="app__skills-exp-work"
data-tip
data-for={work.name}
>
<h4 className="bold-text">{work.name}</h4>
<p className="p-text">{work.company}</p>
</motion.div>
<ReactTooltip
id={work.name}
effect="solid"
arrowColor="#fff"
className="skills-tooltip"
>
{work.desc}
</ReactTooltip>
</Fragment>
))}

Answer 2

According to react docs, the key has to be
a string that uniquely identifies a list item among its siblings
It is possible that the key you have provided for each element is not unique. For eg key={skill.name} key={experience.year} will not work if there are two list items with the same name or year respectively.
What you can do is use any uniquely identifiable property of the list item or the index of the array.
{skills.map((skill, index) => (
<motion.div
whileInView={{ opacity: [0, 1] }}
transition={{ duration: 0.5 }}
className="app__skills-item app__flex"
key={index}
>
<div
className="app__flex"
style={{ backgroundColor: skill.bgColor }}
>
<img src={urlFor(skill.icon)} alt={skill.name}/>
</div>
<p className="p-text">{skill.name}</p>
</motion.div>
))}