Реагировать на проблему добавления className

Я не уверен, как это искать, но после некоторого просмотра здесь и поиска в Google я, должно быть, не ищу это правильно.

Здесь я использую функцию, которая применяет className onClick. вот так.

  const [isActive, setActive] = useState(false)
  const handleClick = () => [
    setActive(!isActive) 
  ]

// this is the return

     <button onClick = {() => {jokes(); handleClick()}}> Get Jokes</button>
          <div className = {isActive ? 'card' : ''}>
            <h4>{data?.body?.[0].setup}</h4>
            <p>{data?.body?.[0].punchline}</p>
          </div>

Проблема, с которой я сталкиваюсь, заключается в том, что после нажатия кнопки применяется имя класса «карта», если кнопка нажимается снова, имя класса удаляется. Как я могу настроить его так, чтобы после его применения он не удалялся другим щелчком?