Vue 3 - Laravel - Inertia Partial reloading not working properly

I have experience with the previous router-view but right now I'm confused. The Problem I'm facing is that all components are updated, the page is not reloading, but everything is being updated.

The issue that I'm facing is when I click on for example "Home", a Transition will be added to My component and It will fade in with this sub-menu (1,2,3), but when I click on any of this sub-menu items (1,2,3) I was expecting to update only Submenu Component and not to get transition again for both My component and Submenu Component

The structure that I have is next:

Layout :

<script setup>

</script>

<template>
  <h1>This is layout</h1>
  <nav>
    <Link :href="route('home')">Home</Link>
    <Link :href="route('info')">Info</Link>
    <Link :href="route('about')">About</Link>
  </nav>
  <div class="content">
    <Transition name="page" appear>
      <span />
    </Transition>
  </div>
</template>

<style scoped lang="scss">

</style>

MyComponent:

<script setup>
import Layout from "@/layouts/Layout.vue"
</script>

<template>
  <Layout>
    <h1>This is my component</h1>
    <ul>
      <li>
        <Link :href="route('my.route.1')">Menu 1</Link>
        <Link :href="route('my.route.2')">Menu 2</Link>
        <Link :href="route('my.route.3')">Menu 3</Link>
      </li>
    </ul>
    <div class="submenu-content">
      <slot />
    </div>
  </Layout>
</template>

<style scoped lang="scss">

</style>

SubmenuComponent:

<script setup>
import Layout from "@/layouts/MyComponent.vue"
</script>

<template>
  <MyComponent>
    <h1>I'm submenu component and my content is here</h1>
  </MyComponent>
</template>

<style scoped lang="scss">

</style>

MyController.php

public function viewSubComponent(Request $request) {
   $data = [1,2,3,4,5];
   return inertia('SubComponent', ['data' => $data]);
}

from Vue 3 - Laravel - Inertia Partial reloading not working properly