I'm having trouble allocating right icon signs to tags, using values of objects.

please check my code first.

// index.js
// I just made this code, so there might be misspelling.

const DATA = [
  {
    question: what is the name of the inventor?,
    a: Mark,
    b: Jacob,
    c: Aden,
    d: Morrie,
    answer: a,
    userAnswer: c
  },
  {
    question: what is the most favorite sports in United States?,
    a: Golf,
    b: Soccer,
    c: Football,
    d: Basketball,
    answer: c,
    userAnswer: a
  },
]

const index = () => {
    const wrongQuestions = DATA.map((answer) => (
    <WrongAnswerLayout props={answer} key={answer.question} />
  ))

  return (
    <ul>
      {wrongQuestions}
    </ul>
  )
}

// WrongAnswerLayout.js

const WrongAnswerLayout = ({ props }) => {
  return (
    <li>
      <div>{props.question}</div>
      <p>{props.a}</p>
      <p>{props.b}</p>
      <p>{props.c}</p>
      <p>{props.d}</p>
      <p>userAnswer {props.userAnswer}</p>
    </li>
  )
}

and finally, I have,

import { Correct, Incorrect, Normal } from 'assets/svgs'

which are the icons that signs correct answer, incorrect user answer, and just questions.

It looks like this.

However, what I'm trying to do is using DATA.answer and DATA.userAnswer, I want to give appropriate icons to tags.

For example. for the DATA[1], Incorrect Sign should be placed next to Golf (which was user's answer but not the actual answer), and Correct Sign should be placed next to Football. Moreover, other choices should be next to <Normal /> component.

I'm having trouble figuring out this problem. Please give me some guidance. Thank you.