Comparing 2 arrays and fetch values to see if array 1 is greater than array 2

I am still in the midst of learning React and Javascript and have came to a roadblock with my current project.

Project goal
I am trying to map through two array of objects, and check if a certain property matches.
if recommendedSkillTree.skills.skill === currentSkills.skill, I would then like to check if recommendedSkillTree.skills.level > currentSkills.level.
if the above condition matches, or if currentSkills.skill do not have the skills in the recommendedSkillTree Data, the skill will then show up in a red text. Else, green text.

What I have done
I have tried mapping between the 2 arrays to check if currentSkills.skill === recommendedSkillTree.skills.skill.

  const skillMatch = recommendedSkillTree.filter((skillRecommended) =>
    currentSkills.some((skillCurrent) => skillRecommended.skill === skillCurrent.skill)
  );
.
.
.
  return (
   <div>
     {recommendedSkillTree.map((item, i) => (
            <div key={item.id}>
              <div
                style={{
                  color: !skillMatch[i] ? "red" : "green", 
                }}
              >
                {item.skill}
              </div>
            </div>
          ))}
   </div>

By doing so, I am able to churn out an output where skills that are present in currentSkills are shown in green, and those that are not in it are shown in red.

Next I would like to go one step deeper, and tried to compare the skill level of the present skills, and if they fall short of the recommended level, the text would then show in red.

  const levelGap = recommendedSkillTree.map((recommendedLevel) =>
    currentSkills.some((levelCurrent) => recommendedLevel.level > levelCurrent.level)
  );

By doing so, I would be expecting an output of

[true, false, true, true, true, true, true, true, true]

instead I’ve got:

[true, true, true, true, false, true, true, false, false]

I am unable to see which part have went wrong. Would greatly appreciate if any seniors in this field would guide me along.

Data 1

const recommendedSkillTree = [
  {
    id: "1",
    role: "Paladin",
    skills: [
      {
        id: "1",
        skill: "Attack",
        level: "3",
      },
      {
        id: "2",
        skill: "Block",
        level: "3",
      },
      {
        id: "3",
        skill: "Taunt",
        level: "3",
      },
      {
        id: "4",
        skill: "Heal",
        level: "4",
      },
      {
        id: "5",
        skill: "Group Heal",
        level: "2",
      },
      {
        id: "6",
        skill: "Double Attack",
        level: "4",
      },
      {
        id: "7",
        skill: "Ultimate",
        level: "3",
      },
      {
        id: "8",
        skill: "Defense Up",
        level: "2",
      },
      {
        id: "9",
        skill: "Attack Up",
        level: "2",
      },
    ],
  },
];
export default recommendedSkillTree;

Data 2

const currentSkills = [
  {
    id: "1",
    skill: "Attack",
    level: "2",
  },
  {
    id: "2",
    skill: "Block",
    level: "3",
  },
  {
    id: "3",
    skill: "Taunt",
    level: "2",
  },
  {
    id: "4",
    skill: "Heal",
    level: "3",
  },
  {
    id: "5",
    skill: "Final Slash",
    level: "3",
  },
];
export default currentSkills;

Thank you in advance for your time, and I do apologize if my way of asking questions are not up to community standard as this is my first time posting on here.
I do not really have anyone around me to ask questions on since I am fully self-taught and no one around me is in the tech field. Thank you so much.