I'm currently working on a sideBar component with 3 buttons. When I click on one of the 3 buttons, I try to change the background color of the button, but it doesn't work, could someone take a look at it?

...

function SideBarAdmin() {
  const [backgrounds, setBackgrounds] = useState({
    listGiveaways: false,
    listUsers: false,
    createGiveaway: false,
  });

  const handleButtonClick = (pageName: string) => {
    setBackgrounds((prevState) => ({
      ...prevState,
      [pageName]:!prevState[pageName as keyof typeof backgrounds],
    }));
  };

  return (
    <div className="min-w-[280px] mt-[40px] min-h-[100vh]">
      <div className="flex flex-col ml-[30px] mr-[30px]">
        <div className="flex items-center mb-[10px]">
          <LogoAwarldSvg width={32} height={32} />
          <div>
            <h1 className="font-bold text-[20px] pl-[16px]">Awarld</h1>
          </div>
        </div>
        <div className="text-gris">
          <p>Panel Administrateur</p>
        </div>
      </div>
      <div className="flex flex-col mt-[20px] mb-[20px] ml-[23px] mr-[23px]">
        <button
          className={`bg-${
            backgrounds.listGiveaways ? "bgOnClick" : "[#FFF]"
          } flex pl-[7.5px] pr-[7.5px] pt-[10px] pb-[10px] rounded-[8px]`}
          onClick={() => handleButtonClick("listGiveaways")}
        >
          <ListGiveawaysSvg width={24} height={24} />
          <div className="ml-[10px] mr-[10px] font-semibold">
            Liste des concours
          </div>
        </button>
        <button
          className={`bg-${
            backgrounds.listUsers ? "bgOnClick" : "[#FFF]"
          } flex pl-[7.5px] pr-[7.5px] pt-[10px] pb-[10px] rounded-[8px]`}
          onClick={() => handleButtonClick("listUsers")}
        >
          <ListUsersSvg width={24} height={24} />
          <div className="ml-[10px] mr-[10px] font-semibold">
            Listes des utilisateurs
          </div>
        </button>
        <button
          className={`bg-${
            backgrounds.createGiveaway ? "bgOnClick" : "[#FFF]"
          } flex pl-[7.5px] pr-[7.5px] pt-[10px] pb-[10px] rounded-[8px]`}
          onClick={() => handleButtonClick("createGiveaway")}
        >
          <CreateGiveawaySvg width={24} height={24} />
          <div className="ml-[10px] mr-[10px] font-semibold">
            Créer un concours
          </div>
        </button>
      </div>
...