I have an array of emojis and each emoji has `emoji` and `label` field. I would like to know how to render emoji using map in my component.

I have stored all the emojis as SVG files in the `src/assets/emojiIcons`.

Right now, I'm doing like this:

```
import { ReactComponent as Coin } from "../assets/emojiIcons/coin.svg"
import { ReactComponent as Rocket } from "../assets/emojiIcons/rocket.svg"

const DEFAULT_EMOJI_OPTIONS = [
  {
    emoji: Rocket,
    label: "rocket",
  },
  {
    emoji: Coin,
    label: "coin",
  },
]

export { DEFAULT_EMOJI_OPTIONS }

```

importing the emojis in my component like this:

```
import { DEFAULT_EMOJI_OPTIONS } from "../../utils/emojis"

const EmojiSection = () => {
  return (
    <div className="text-white border-2 border-gray-800 rounded p-3 my-8 max-w-xs mx-auto">
      {DEFAULT_EMOJI_OPTIONS.map((emoji) => (
          <emoji.emoji />
      ))}
    </div>
  )
}

```

Is there any better way of doing this?