So I have created a button component where i have passed props for how the btn will look. But when i try to use the props the props dont work. I dont think this is a problem with my code because if you use the colors manually first in the btn file, compile it, then use them as a prop it works only for that color

src/Button.js

import React from "react";

function Button({ text, img, textColor, bg, hoverBg }) {
  console.log(hoverBg);
  return (
    <button
      className={`flex-center h-10 w-full ring-1 ring-gray-300 rounded-full bg-${bg} hover:bg-${hoverBg}`}
    >
      <img src={img} alt="button-img" className="h-6" />
      <h1 className={`font-bold text-${textColor}`}>{text}</h1>
    </button>
  );
}

export default Button;

src/pages/Register.page.js (The page where im using the button comp)

import React from "react";

function Button({ text, img, textColor, bg, hoverBg }) {
  console.log(hoverBg);
  return (
    <button
      className={`flex-center h-10 w-full ring-1 ring-gray-300 rounded-full bg-${bg} hover:bg-${hoverBg}`}
    >
      <img src={img} alt="button-img" className="h-6" />
      <h1 className={`font-bold text-${textColor}`}>{text}</h1>
    </button>
  );
}

export default Button;