fix: improve required skills handling

Author: pkulkark

src/learningpath/LearningPathDetails.jsx

@@ -208,8 +208,8 @@ const LearningPathDetailPage = () => {
           <section id="requirements" className="mb-6">
             <h2>Requirements</h2>
             {requiredSkills && requiredSkills.map((skill) => (
-              <p key={`requirement-${skill.replace(/\s+/g, '-').substring(0, 40)}`}>
-                {skill}
+              <p key={`requirement-${skill.display_name.replace(/\s+/g, '-').substring(0, 40)}`}>
+                {skill.display_name}
               </p>
             ))}
           </section>