Property "IsFavorite" was accessed during render but is not defined on instance

in my Vue 3 app I made myself two components:

App.Vue (father)

<template>
  <section>
    <header>
      <h1>My Friends</h1>
    </header>
    <ul>
      <friend-contact
        v-for="friend in friends"
        :key="friend.id"
        :id="friend.id"
        :name="friend.name"
        :phone-number="friend.phone"
        :email-addresses="friend.email"
        :is-favorite="friend.isFavorite"
        @toggle-favorite="toggleFavoriteStatus"
      >
      </friend-contact>
    </ul>
  </section>
</template>

<script>
export default {
  data() {
    return {
      friends: [
        {
          id: "manuel",
          name: "Manuel Lorenz",
          phone: "0123 45678 90",
          email: "[email protected]",
          isFavorite: true,
        },
        {
          id: "julie",
          name: "Julie Jones",
          phone: "0987 654421 21",
          email: "[email protected]",
          isFavorite: false,
        },
      ],
    };
  },
  methods: {
    toggleFavoriteStatus(friendId) {
      const objFriend = this.friends.find((friend) => friend.id === friendId); 
      objFriend.isFavorite = !objFriend.isFavorite;
    },
  },
};
</script>

FriendContact.vue (child)

<template>
  <li>
    <h2>{{ name }} {{ IsFavorite ? 'Favorite':''}}</h2>
    <button @click="toggleFavorite">
      Toggle Favorite
    </button>
    <button @click="toggleDetails">
      {{ detailsAreVisible ? "Hide" : "Show" }} Details
    </button>

    <ul v-if="detailsAreVisible">
      <li>
        <strong>Phone:</strong>
        {{ phoneNumber }}
      </li>
      <li>
        <strong>Email:</strong>
        {{ emailAddress }}
      </li>
    </ul>
  </li>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      required: true,
    },
    name: {
      type: String,
      required: true,
    },
    phoneNumber: String,
    emailAddress: String,
    isFavorite: {
      type: Boolean,
      required: false,
      validator: function (value) {
        return value === true || value === false;
      },
    },
  },
  data() {
    return {
      detailsAreVisible: false,
    };
  },
  methods: {
    toggleDetails() {
      this.detailsAreVisible = !this.detailsAreVisible;
    },
    toggleFavorite(){
     this.$emit('toggle-favorite',this.id);
    }
  },
};
</script>

When loading the page I get the following error:

[Vue warn]: Property "IsFavorite" was accessed during render but is not defined on instance. 
  at <FriendContact key="manuel" id="manuel" name="Manuel Lorenz"  ... > 
  at <App>

I do not understand why ... it compiles me but does not render me then strig after name and gives me that error

here you can find the project with the code and the rendering problem that I can't solve => https://sfc.vuejs.org/#eNqtV3tz4jYQ/yoqaSekE9tA3i7QpI+b3k2v05l0+k/pH8IWWIktuZKchOP47l09bAswuU7vnJBYu6t9a/Vj3bsry/CpIr24N1akKHOsyHTGEBpLkijKmVnAMiM4JcKt9Ho4fb9CbwQlLJXjCJZOMNqSHFd5u2dhpIOEM4UTVZMRegoWXExmPctHlCH7Jme9Vih+JKtGJqTpFo+mB1kMF6Rl6tUWu8w4IwGrijlpXQgNdUuOFJjmAU5TQaQkshU1jG1nZLDAT1xQ5Rmm8o2j+bK3ii+XOfHlLaUWvldYVV4epuNoO4tN2l2ix1FbuHHklRSWMhG0tDtoUXKhXP1+tKog67xAx2G0RdXdcfzdjJEXsyMlC1zlCq2t3YSDIkaYkjFa76jbnGqZFCvcP6nlBVGVYPUK1YWO0V9tUhqmfmgao1mvwKwikGWjsX50LTXzvWGiX7kg7MOOjCmkFhoMR2fo/OLy6hrdDHaETAlbM7c5T3CecalCCG9Htq1jjJSoiMe08R6M4aHKKRS/M4R3mofega9Q6wMB3FxfocuL8/PREI2GhyIwRv5zAAucy+4I/nZvG6h8TS+IyriulQuuq1P7tqBv06biukeYVIjPH2x7oAlSGZWhK324oCztu30naDJ1PQHnGE0mE7cChcYT/TSavEMFSr/qortNNgD9VwcEZ6Q+CfpUqFWuD8i31uM5fwkk/UDZMoZ3AaMsABLs2mjpTBW5lVtAl8O5LWi+MhWEbEOmkcRMBpIIuqi3zHm6slsKLJaUxWjQaDOj0rOb4ZQ/gwAalS/oGj5iOcf9wSlyv+Ho0uahVnUmSIFwpbihOn8FTmkFdRoOSu04NBHMLRPQEMStJE4el4JXZpDkXMTo6OJ6MDhPDdeRnrM6g4q8qADndAkmEzjtRBjyM01VFsOB+sY59RI40vnAWjJhHuGyRJXLm58EzzO7zKlUgSlIjBg0/paGnH5OpnTo/ydTXyD0bOS1DPQWBDdqClG3mFK8gM0QieQ59P5RkiR+Mfz6NDmEHxNX01HG3rwCZW7IapsxXKkZtKSy+iohtcKS0yYa6wVE3ZpfLAaDq6tDzeJx95qlrWk4uNDetV3nVU6b0h9dv+7a7QYUZ/yJCDjDPg0uGvpEXGPs+0mSs+HljZ/pTs6+W7oQB92CAWKGRu+0Zy/SoMBl+CA5AxxlXJk5BozzZl7OenCV6vWslylVyjiKKlY+LvWQjm6BF4mKKVqQIOXF7Vk4Cs+uohROhE8PiSyCueDPMGPAYjPcjXK4+wWkKICLEEIl4lVjO7JbBnd4e0bNNIVUQAL2wMI+lMxpgyJH0/Xa3Hpos0Hw+rad4N+Dqy1GQtpz+LfZAKIc1ftdZ98mOU0e98DSrDf9wxBQTRlHdsfr+38iCq5PCKuBquBZaol3gvxJJZ2DUu3gLzStnbvP+LNxENX7HRJrTDYQGBAuXYC5PZ2eyTZLZiWV4Gw5/d1c/7rfzNIDGGsLDX4zyBW8aPREnqJupT8btNCt1CCJOwtzu7V6UNPQDqLMLsRYCg69WJ8IDYwamKBWJQzGeyVgdjQ4RJB/KioIyHlgq4YpFj19hgIvgzsb/TTssHwAtWP7B85zgtnrxuH7DlwnAIv1GFpUzKB11AdiRTzU1GBlwzBQSCtBHz96FAPgGmBUh9WinU/B772G3MaEn0Z/rvVbC8DQ4G7/9ABA6+ZsQbRdVNk/Ab1Os9n+NSmo6h/vfG86PjVMalCi09eJ+HqbfwGNYcAy