Hello everyone. I have the following code. This code creates a chip which should be displayed in a table. For each specific rank the chip should be displayed in a specific colour. The classes are also added correctly which I have tested with the Chrome Developer Tools. But unfortunately no background colour is displayed. or only specific ones.

import React from "react";
import { ranks } from "@/utils/ranksdata";
import { Chip } from "@nextui-org/react";

const RankDisplay = ({ rank }) => {
  return (
    <Chip
      key={rank}
      className={`${getRankColor(rank)} text-white font-bold capitalize`}
      size="sm"
      variant="flat"
    >
      {rank}
    </Chip>
  );
};

function getRankColor(rankValue) {
  const rank = ranks.find((r) => r.value === rankValue);
  return rank ? rank.color : "bg-default-500";
}

export default RankDisplay;