In the code given below when i try to use the colorPalatte in register the value is binding in themes(usestate) but in the class im not able to use it like this : className={bg-[${theme.?primaryColor}]} but when i declared the value like this –> primaryColor: “bg-[#222831]”, its working . is their any way to use the only the value and bind it with the tailwind css ?

ColorPalatte.tsx

export interface colorPalatteType {
  primaryColor: string;
  secondaryColor: string;
  tertiaryColor: string;
  quartinaryColor: string;
}

export default function ColorPalatte(): colorPalatteType {
  return {
    primaryColor: "bg-[#222831]",
    secondaryColor: "393E46",
    tertiaryColor: "00ADB5",
    quartinaryColor: "EEEEEE",
  };
}

Register.tsx

import { motion } from "framer-motion";
import { Link, useNavigate } from "react-router-dom";
import CssDoodleUnicode from "../../../components/backgroundAnimation/CssDoodleUnicode";
import { useEffect, useState } from "react";
import {
  AuthResponse,
  AuthenticationService,
} from "../service/AuthenticationService";
import axios from "axios";
import { USER_REGISTER_URL } from "../../../systemutils/SystemConstants";
import SignWithGoogleButton from "../../../components/SignWithGoogleButton";
import { VerificationPopUs } from "../../../components/common/PopUs/VerificationPopUs";
import ColorPalatte, {
  colorPalatteType,
} from "../../../systemutils/ColorPalatte";
interface request {
  emailAddress: string;
  password: string;
}

function register() {
  const [theme, setTheme] = useState<colorPalatteType>();
  const [email, setEmail] = useState<string>("");
  const [password, setPassword] = useState<string>("");
  const [message, setMessage] = useState<string>("");
  const [disabled, setDisabled] = useState<boolean>(false);
  const [authResponse, setAuthResponse] = useState<AuthResponse>({
    isStatus: false,
    message: "",
  });
  const signUpButtonTrigger = async () => {
    setDisabled(true);
    const validationResponse = AuthenticationService(email, password);
    setAuthResponse(validationResponse);
    setMessage(validationResponse.message);
  };

  const doodleTimeOut = () => {
    document.querySelectorAll("css-doodle").forEach(function (o: any) {
      o.update();
    });
  };
  const navigate = useNavigate();
  useEffect(() => {
    if (authResponse.isStatus) {
      try {
        const body: request = {
          emailAddress: email,
          password: password,
        };
        const register = async () => {
          await axios
            .post(USER_REGISTER_URL, body)
            .then((response) => {
              if (response.data.status) {
                setDisabled(true);
                VerificationPopUs("Verification Message Send to your Email");
                setTimeout(() => {
                  navigate("/");
                }, 2500);
              }
            })
            .catch((error) => {
              if (error.response.data.errorCode === "1003") {
                setMessage("Email Already Exist");
              }
            });
        };
        register();
      } catch (error) {
        setMessage("Server not Reachable");
      }
    }
  }, [authResponse]);

  useEffect(() => {
    document.body.style.overflow = "hidden";
    const genDoodleID = setInterval(doodleTimeOut, 150);

    return () => {
      document.body.style.overflow = "unset";
      clearInterval(genDoodleID);
    };
  }, []);
  useEffect(() => {
    const getTheme = ColorPalatte();
    setTheme(getTheme);
  }, []);
  console.log(theme?.primaryColor)
  return (
    <>
      {/* <div className="absolute  w-[100%] select-none overflow-hidden">
        <CssDoodleUnicode></CssDoodleUnicode>
      </div> */}
      <motion.div
        className="absolute top-1/2 left-1/2 bottom-1/2  right-1/2 flex items-center justify-center text-lg "
        initial={{ opacity: 0, scale: 0 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.5 }}
      >
        <div className="flex items-center justify-center px-5 sm:px-0">
          <div className={`flex ${theme?.primaryColor} rounded-lg shadow-lg border border-green-400 overflow-hidden w-[50dvh]`}>
            <div className="w-full p-8">
              <p className="text-gray-100 font-semibold text-center text-2xl">
                Create New Account
              </p>
              <p className="text-red-600">{message}</p>
              <div className="mt-4">
                <label className="block text-gray-200  text-sm font-bold mb-2">
                  Email Address
                </label>
                <input
                  onChange={(e) => {
                    setEmail(e.target.value);
                  }}
                  className="text-gray-800 border border-gray-300 rounded py-2 px-4 block w-full focus:outline-2 focus:outline-blue-700"
                  type="email"
                  required
                />
              </div>
              <div className="mt-4 flex flex-col justify-between">
                <div className="flex justify-between">
                  <label className="block text-gray-200 text-sm font-bold mb-2">
                    Password
                  </label>
                </div>
                <input
                  onChange={(e) => {
                    setPassword(e.target.value);
                  }}
                  className="text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:outline-2 focus:outline-green-700"
                  type="password"
                />
              </div>
              <div className="mt-8">
                <button
                  disabled={disabled}
                  onClick={() => signUpButtonTrigger()}
                  className="bg-green-600 transition-colors duration-200 text-white font-bold py-2 px-4 w-full rounded-lg hover:bg-green-700"
                >
                  Sign up
                </button>
              </div>
              <SignWithGoogleButton />
              <div className="mt-4 flex items-center w-full text-center">
                <span className="text-xs text-gray-500 capitalize text-center w-full">
                  Don't have any account yet?
                  <Link to={"/authentication/"} className="text-green-700">
                    {" "}
                    Sign In
                  </Link>
                </span>
              </div>
            </div>
          </div>
        </div>
      </motion.div>
    </>
  );
}

export default register;

im expecting to use the hexcode which is retuned from color palatte and bind it with the tailwind bg-[${value}]