React.js de buton arka planın değişmeme sorunu

import React from "react";
import { NavLink,useNavigate} from "react-router-dom";
import { useModal } from "../ModalContext";
import "./aside.css";

function Aside() {
const { openModal } = useModal();
const navigate = useNavigate();
const handleNewPostClick = () => {

openModal();

};
const handleJournalClick = () => {

navigate('/');

};
const handleRolidClick = () => {

navigate('/rolid');

};
return (

<div className={`fixed bottom-0 z-50 w-full -translate-x-1/2 border-t border-blue-500 left-1/2 dark:bg-blue-500 dark:border-blue-500`} style={{ backgroundColor: "#1b2642" }}>
  <div className="w-full">
    <div className="grid max-w-xs grid-cols-2 gap-1 px-1 py-0.5 mx-auto my-1 bg-blue-200 rounded-lg dark:bg-white" role="group">
      <button type="button" className={`px-4 py-1 text-xs font-medium text-white-90 rounded-lg `} onClick={handleJournalClick} >
        Journal
      </button>
      <button type="button" className={`px-4 py-1 text-xs font-medium text-white-90 rounded-lg `}onClick={handleRolidClick}>
        Rolid
      </button>
    </div>
  </div>
  bu kodda arka plan değişikliği yapıldığında butona iki kez tıklamak gerekiyor ki öyle arka plan rengi değişebilsin tek tıklamada değişmiyor tailwind css kullandım burada yardım edebilecek olan var mı