Как мне передать className пропсу в React

Есть функция, которая создает пользователя, как добавить пропсу symbol className. Сейчас есть строка, но она не принимает классы, размер такой же, как изначально. У svg стоят пропсы className

<div className="w-3 h-3">{symbol}</div>

Полный код для большего понимания:

import Image from "next/image";
import { useState } from "react";
import Avatar1 from "./avatar/Avatar1.jpg";
import Avatar2 from "./avatar/Avatar2.jpg";
import Avatar3 from "./avatar/Avatar3.jpg";
import Avatar4 from "./avatar/Avatar4.jpg";
import { CrossIcon } from "./icons/cross-icon";
import { ZeroIcon } from "./icons/zero-icon";
import { TriangleIcon } from "./icons/triangle-icon";
import { SquareIcon } from "./icons/square-icon";
import clsx from "clsx";

const players = [
  {
    id: 1,
    name: "Sasha",
    avatar: Avatar1,
    rating: 1230,
    symbol: <CrossIcon />,
  },
  { id: 2, name: "Dogi", avatar: Avatar2, rating: 720, symbol: <ZeroIcon /> },
  {
    id: 3,
    name: "Otter",
    avatar: Avatar3,
    rating: 980,
    symbol: <TriangleIcon />,
  },
  {
    id: 4,
    name: "Parrot",
    avatar: Avatar4,
    rating: 1590,
    symbol: <SquareIcon />,
  },
];
function PlayerLayout({ avatar, name, rating, symbol }) {
  return (
    <div>
      <div className="flex items-center w-64 h-12 gap-3 mb-3">
        <div className="w-180 flex">
          <Image
            className="rounded-full mr-2 relative"
            src={avatar}
            alt="avatar"
          />
          <div className="absolute flex items-center justify-center bg-white w-5 h-5 rounded-full -ml-1 -mt-1 shadow">
            <div className="w-3 h-3">{symbol}</div>
          </div>
          <div>
            <div className="text-teal-600   text-lg">{name}</div>
            <div className="text-slate-400 text-xs">Рейтинг: {rating}</div>
          </div>
        </div>
        <div className="w-px h-6 bg-slate-200 mx-3"></div>
        <div className="text-lg font-semibold">01:08</div>
      </div>
    </div>
  );
}
export function GameInfo() {
  const [playersUseCount, setPlayersUseCount] = useState(players);

  return (
    <div className="w-[616px] h-max justify-center bg-white rounded-2xl flex items-center px-8 mb-6 shadow-md flex-wrap py-4">
      {playersUseCount.map((player) => (
        <div key={player.id}>
          <PlayerLayout
            name={player.name}
            avatar={player.avatar}
            rating={player.rating}
            symbol={player.symbol}
          />
        </div>
      ))}
    </div>
  );
}