Как переключить логическое поле в Firebase 9

Я хочу переключить логическое значение поля в Firebase 9. Я использую Vue 3

Если значение isFav равно true, я хочу сделать это false по клику

Если значение isFav равно false, я хочу сделать это true по клику

Он отлично работает, когда я устанавливаю значение isFav просто false или true. Но установка значения как !isFav не работает.

<template>
  <!-- books list -->
  <div v-for = "book in books" :key = "book.id" class = "book">
    <span class = "material-icons fav_ico" @click = "toggleFav(book.id)">
      favorite
    </span>
    <h2>{{ book.title }} ({{ book.author }})</h2>
    <div>
      <span class = "material-icons done" @click = "completeBook"> done </span>
      <span class = "material-icons" @click = "EditBook"> edit </span>
      <span class = "material-icons delete" @click = "deleteBook(book.id)">
        delete
      </span>
    </div>
  </div>
</template>

<script setup>
import { ref } from "@vue/reactivity";
import { onMounted, onUnmounted } from "@vue/runtime-core";
import { showBooks, books } from "../use/getBooks.js";
import { doc, deleteDoc, setDoc } from "firebase/firestore";
import { db } from "../firebase/config";

onMounted(() => {
  showBooks();
});
function toggleFav(bookid) {
  const data = {
    isFav: !isFav,
  };

  const docRef = doc(db, "books", bookid);
  setDoc(docRef, data, { merge: true });
}
// Delete a Book
function deleteBook(bookid) {
  const docRef = doc(db, "books", bookid);

  deleteDoc(docRef);
}
</script>

Консоль

Uncaught ReferenceError: isFav не определен

Может быть, я не читаю значение isFav в первую очередь. Но как я могу это сделать?