Change button color and text color onclick using ionic react

Question

I'm using Ionic React in my project to create a mood selection tab. When a user selects/clicks a mood (button), the emoji, button color, and button text color will change. If the user then clicks another button, the previous button will revert back to its original color.

like this:

but I can only change the emoji image. I tried using --color-activated and --background-activated to change the color of the button color and text color but nothing change. anyone know how to do it? any help will be appreciated

here's my code:

const Tab1: React.FC = () => {
  const user = useContext(UserContext);

  const [imageClicked, setImageClicked] = useState({
    noEmoji: true,
    great: false,
    happy: false,
    okay: false,
    sad: false,
    angry: false
  });

  const onClickHandler = (order: any) => {
    const resetimages = {
      noEmoji: false,
      great: false,
      happy: false,
      okay: false,
      sad: false,
      angry: false
    };
    setImageClicked({
      ...resetimages,
      [order]: true,
    });
  };

  return (
    <IonPage>
      <IonHeader translucent={true} mode="ios" class="ion-no-border">
        <IonToolbar>
          <IonTitle id="headerTitle">Select Your Mood</IonTitle>
          <IonButtons slot="start">
            <IonButton id="headerSettings" routerLink="/userProfile">
              <IonIcon slot="icon-only" size="large" icon={personCircleOutline} />
            </IonButton>
          </IonButtons>
        </IonToolbar>
      </IonHeader>

      <IonContent fullscreen>
        <IonTitle class="ion-text-center" id="welcomeTitle">
          <div>
            Hello {user?.displayName},
          </div>
          <div>
            How are you today?
          </div>
        </IonTitle>

        <IonGrid>
          <div>
            {imageClicked.noEmoji && <img src={noEmoji} alt="noEmoji" id="noEmoji" />}
            {imageClicked.great && <img src={great} alt="great" id="emojisImage" />}
            {imageClicked.happy && <img src={happy} alt="happy" id="emojisImage" />}
            {imageClicked.okay && <img src={okay} alt="okay" id="emojisImage" />}
            {imageClicked.sad && <img src={sad} alt="sad" id="emojisImage" />}
            {imageClicked.angry && <img src={angry} alt="angry" id="emojisImage" />}
          </div>

          <div id="emojisButtonContainer">
            <IonRow>
              <IonButton
              id="greatButton"
              shape="round"
              expand="block"
              onClick={() => onClickHandler('great')}
              >Great</IonButton>

              <IonButton
              id="happyButton"
              shape="round"
              expand="block"
              onClick={() => onClickHandler('happy')}
              >Happy</IonButton>
            </IonRow>
            
            <IonRow>
              <IonButton
              id="okayButton"
              shape="round"
              expand="block"
              onClick={() => onClickHandler('okay')}
              >Okay</IonButton>

              <IonButton
              id="sadButton"
              shape="round"
              expand="block"
              onClick={() => onClickHandler('sad')}
              >Sad</IonButton>

              <IonButton
              id="angryButton"
              shape="round"
              expand="block"
              onClick={() => onClickHandler('angry')}
              >Mad</IonButton>
            </IonRow>
          </div>
        </IonGrid>

        <IonButton
        id="Create"
        shape="round"
        expand="block"
        routerLink="/addnote"
        >Create +</IonButton>
        
      </IonContent>
    </IonPage>
  );
};