What I'm trying to achieve is I have a list that I receive from an API call where I have the color in hexcode, for example, color: #00FF00

      {stages.map((item) => {
        return (
          <tr className="bg-white">
            <td className="flex px-3 justify-evenly ">
              <span className="mr-auto">{item.id}</span>
              <span className=" pr-5">{item.name}</span>
            </td>
            <td>
              <div className="flex justify-center items-center">
                <span className=" ">{item.id}</span>
              </div>
            </td>
            <td className="flex justify-center items-center p-3">
              <div className={`bg-[${item.color}] rounded-full px-2`}>
                <span className="self-center  ">{item.description}</span>
              </div>
            </td>

            <td>
              <div className="flex justify-center items-center">
                <span className=" ">--</span>
              </div>
            </td>
          </tr>
        );
      })}

the bit I'm concerned about is

              <div className={`bg-[${item.color}] rounded-full px-2`}>
                <span className="self-center  ">{item.description}</span>
              </div>

background-color doesn't seem to be working for me, what I'm receiving is the hex code so the color is #color, is there any way to write it better?