Как загрузить значок в GraphCms/GraphQl из значка реакции, а затем отобразить в nextJS?

Question

Я хочу иметь возможность загрузить значок в graphcms, а затем использовать значок в Next.js.

Я попытался добавить функцию «Многострочный текст» в graphcms и внутри указать имя значка, например «AiFillHome».

Однако, к сожалению, это выглядит так:Плохой результат

это то, что мне нужно:Требуемый результат

      import React, { useState, useEffect } from "react";
import Link from "next/link";

import { getCategories } from "../services";

import { AiFillHome } from "react-icons/ai";
import { MdTravelExplore } from "react-icons/md";
import { MdFastfood } from "react-icons/md";
import { HiTrendingUp } from "react-icons/hi";
import { SiAnydesk } from "react-icons/si";

const Sidebar = () => {
  const [categories, setCategories] = useState([]);

  useEffect(() => {
    getCategories().then((newCategories) => {
      setCategories(newCategories);
    });
  }, []);

  console.log(categories);

  return (
    <div className="px-8 pt-2 -mt-10">
      <div className="py-10">
        <ul>
          <span className="tracking-widest text-gray-500 uppercase text-xxs">
            category
          </span>

          <div className="flex flex-col pt-5 space-y-8">
            <div className="flex items-center space-x-4 group">
              <span className="p-2 text-gray-500 bg-gray-800 rounded-xl group-hover:text-white group-hover:bg-gray-500">
                <AiFillHome />
              </span>
              <Link
                href="/"
                className="text-sm text-gray-500 group-hover:text-white group-hover:font-semibold"
              >
                Discover
              </Link>
            </div>
          </div>

          {categories?.map((category, index) => (
            <li>
              <ul className="flex flex-col pt-5 space-y-8">
                <li className="flex items-center space-x-4 group">
                  <span className="p-2 text-gray-500 bg-gray-800 rounded-xl group-hover:text-white group-hover:bg-gray-500">
                    {`<${category.icon} />`}
                    {/*<img src={category?.icon?.url} alt="" className="" /> */}
                  </span>
                  <Link
                    key={index}
                    href={`/category/${category.slug}`}
                    className="text-sm text-gray-500 group-hover:text-white group-hover:font-semibold"
                  >
                    {category.name}
                  </Link>
                </li>
              </ul>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default Sidebar;

Графql:

      export const getCategories = async () => {
  const query = gql`
    query GetGategories {
      categories {
        icon
        name
        slug
      }
    }
  `;

  const result = await request(graphqlAPI, query);

  return result.categories;
};