Как сделать что бы кнопка красилась когда она активана? React TypeScript

Вот сам код:

import { ReactNode } from 'react'
import styles from './styles/.custom_button.module.css';

interface CustomButtonProps {
  children: ReactNode;
  isActive?: boolean;
  OnClick: () => void;
}

export function CustomButton({ children, isActive = false, OnClick, ...props }: CustomButtonProps) {


  return (
    <button onClick={OnClick} className={`${styles.custom_button} ${isActive ? 'active' : 'inactive'}`} {...props}>
      {children}
    </button>
  )
}

import { useState } from 'react';
import styles from './styles/matches.module.css';
import { CustomButton } from './custom_button/custom_button';
import { AllPostHashtag } from './hashtag/hashtag';
import { AllResearchesCity } from './city/city';

export function Matches() {
    const [isOpenPosts, setIsOpenPosts] = useState<boolean>(false);
    const [isOpenCity, setIsOpenCity] = useState<boolean>(false);
    
    async function toggleButtonPost() {
        await setIsOpenPosts(!isOpenPosts);
    }
    async function toggleButtonCity() {
        await setIsOpenCity(!isOpenCity);
    }

    return (
        <>
            <section className={styles.wrapper}>
                <h1 className={styles.title}>Matches by </h1>
                <div className={styles.block}>
                    <CustomButton OnClick={toggleButtonPost}>#hashtags</CustomButton>
                    <CustomButton OnClick={toggleButtonCity}>City</CustomButton>
                </div>
            </section>
            {isOpenPosts ? <AllPostHashtag /> : null}
            {isOpenPosts ? <AllResearchesCity /> : null}
        </>
    )
}

custom_button.module.sass:

.custom_button
  border: none
  cursor: pointer
  font-family: inherit
  text-transform: uppercase
  padding: 0 10px 
  background-color: transparent

  &.active
    color: #4fa2dc

  &.inactive
    color: #d9e0eb