При клике менять класс и текст (React)

const FoodList = () => {
  const data = [
    {
      "id": 1,
      "weight": "0,5",
      "subscrible": "Печень утки или гуся",
      "available": true
    },
    {
      "id": 2,
      "weight": "2",
      "subscrible": "Свежайшая сёмгушка",
      "available": true
    },
    {
      "id": 3,
      "weight": "1",
      "subscrible": "Влажные корма с курицей",
      "available": false
    }
  ]

  let description = <div>текст 1 </div>;
  let unavailableText = <div className={s.unavailableText}>текст 2</div>

  const [text, setText] = useState(description);
  const [isActive, setActive] = useState("false");

 const handleClick = () => {
    if (food.available === false) { 
      setActive(isActive);
      setText(unavailableText); 
      console.log("это ложь ") 
    } else 
    if (food.available === true) { 
      setActive(!isActive);
      setText(food.subscrible); 
      console.log("это истина ") }
  };

     <div className={s.wrapper} onClick={handleClick} >
        <div className={
            ((isActive && food.available === true) ? s.border : s.itemActive) ||  
            ((!isActive && food.available === true) ? s.border : s.itemDisable)
          }> ... 
        </div>
        <div className={s.subscrible} >
           {text} 
        </div>
     </div>

Дано: массив с элементами, у каждого есть ключ available (что означает В наличии или нет) булевого типа.

Условие:

• Если по элементу кликнули и он в наличии, то смени класс s.border на класс s.itemActive + смени текст description на setText(food.subscrible). При повторном клике верни обратно класс и текст.

• Если по элементу кликнули и он не в наличии, то смени класс s.border на класс s.itemDisable + смени текст description на unavailableText. При повторном клике верни обратно класс и текст.

Проблемы:

1. не меняется обратно текст при повторном клике.
2. для товаров не в наличии не меняется класс.