shared element transition in fragments inside viewPager does not work

Question

I wanted to realize when you click on the button there is a transition with animation to another fragment where the button moves up

The problem is that when moving from one fragment to another with animation does not work I think it is because of viewPager. I have an UnBoardingFragment inside of which there is a viewPager and in the viewPager there are 3 fragments

here is the error:

FATAL EXCEPTION: main
Process: com.geeksPro.teachersbook, PID: 8598
java.lang.IllegalArgumentException: Navigation action/destination com.geeksPro.teachersbook:id/action_languageSelectionFragment_to_fontSelectionFragment cannot be found from the current destination Destination(com.geeksPro.teachersbook:id/unBoardingFragment) label=fragment_un_boarding class=com.geeksPro.teachersbook.ui.fragments.onBoardFragments.viewpager.UnBoardingFragment
at androidx.navigation.NavController.navigate(NavController.kt:1686)
at androidx.navigation.NavController.navigate(NavController.kt:2186)
at com.geeksPro.teachersbook.ui.fragments.onBoardFragments.languageselection.LanguageSelectionFragment.clickOne$lambda$0(LanguageSelectionFragment.kt:61)
at com.geeksPro.teachersbook.ui.fragments.onBoardFragments.languageselection.LanguageSelectionFragment.$r8$lambda$a_h_G0y0dpCEuw3lNJhza4x2MR0(Unknown Source:0)
at com.geeksPro.teachersbook.ui.fragments.onBoardFragments.languageselection.LanguageSelectionFragment$$ExternalSyntheticLambda0.onClick(Unknown Source:2)
at android.view.View.performClick(View.java:7448)
at com.google.android.material.button.MaterialButton.performClick(MaterialButton.java:1213)
at android.view.View.performClickInternal(View.java:7425)
at android.view.View.access$3600(View.java:810)
at android.view.View$PerformClick.run(View.java:28305)
at android.os.Handler.handleCallback(Handler.java:938)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:223)
at android.app.ActivityThread.main(ActivityThread.java:7656)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:592)
                                                                                                        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:947)

image error: enter image description here enter image description here

NavGraph

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav_graph"
    app:startDestination="@id/unBoardingFragment">

    <fragment
        android:id="@+id/fontSelectionFragment"    android:name="com.geeksPro.teachersbook.ui.fragments.onBoardFragments.fontselection.FontSelectionFragment"
        android:label="fragment_language_selection"
        tools:layout="@layout/fragment_font_selection" >

    </fragment>

    <fragment
        android:id="@+id/languageSelectionFragment" 
android:name="com.geeksPro.teachersbook.ui.fragments.onBoardFragments.languageselection.LanguageSelectionFragment"
        tools:layout="@layout/fragment_language_selection"
        android:label="LanguageSelectionFragment" >
        <action
            android:id="@+id/action_languageSelectionFragment_to_fontSelectionFragment"
            app:destination="@id/fontSelectionFragment" />
    </fragment>

    <fragment
        android:id="@+id/unBoardingFragment"
        android:name="com.geeksPro.teachersbook.ui.fragments.onBoardFragments.viewpager.UnBoardingFragment"
        android:label="fragment_un_boarding"
        tools:layout="@layout/fragment_un_boarding" >

    </fragment>

</navigation>

ViewPager:

class ViewPager(fragment: Fragment) : FragmentStateAdapter(fragment) {
    companion object {
        private const val NUM_TABS = 3
    }

    override fun getItemCount(): Int {
        return NUM_TABS
    }

    override fun createFragment(position: Int): Fragment {
        return when (position) {
            0 -> LanguageSelectionFragment()
            1 -> FontSelectionFragment()
            2 -> ReadyFragment()
            else -> throw IllegalArgumentException("lox: $position")
        }
    }
}

UnBoardFragment xml:

enter image description here

UnBoardFragment code:

class UnBoardingFragment :
    BaseFragment<FragmentUnBoardingBinding, OnBoardingViewModel>(R.layout.fragment_un_boarding) {

    override val viewModel: OnBoardingViewModel by viewModels()

    override fun inflateBinding(
        inflater: LayoutInflater,
        container: ViewGroup?,
    ) = FragmentUnBoardingBinding.inflate(layoutInflater, container, false)

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        initialize()
    }

    private fun initialize() {
        val adapter = ViewPager(this)
        binding.viewPager2.adapter = adapter

    }
}

LanguageSelectionFragment where when the button is pressed the transition from shared element transtion

enter image description here

LanguageSelectionFragment Code:

    private fun clickOne() {
        binding.kyrgyzButton.setOnClickListener {
            val extras = FragmentNavigatorExtras(
                binding.linearWithButtons to "buttons"
            )
            findNavController().navigate(LanguageSelectionFragmentDirections.actionLanguageSelectionFragmentToFontSelectionFragment(),extras)
        }

FontSelectionFragment xml:

enter image description here

FonSelectionFragment Code:

Here we just catch the animation and use it.

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        sharedElementEnterTransition = TransitionInflater.from(context).inflateTransition(android.R.transition.move)

    }

Я хотел обойтись без Directions при переходе но тогда было невозможно передать extras

binding.kyrgyzButton.setOnClickListener {
            val extras = FragmentNavigatorExtras(
                binding.linearWithButtons to "buttons"
            )
            findNavController().navigate(LanguageSelectionFragmentDirections.actionLanguageSelectionFragmentToFontSelectionFragment(),extras)
        }