ViewPager2 with TabLayout not navigating to correct tab

My TabLayout (containing 5 tabs) doesn't seem to behave with ViewPager2 properly for some reasomn. The app loads fine but when I click Tab D, it goes to Tab E instead. Why does that happen and what can be done to fix this?

Activity

Fragment

class MyFragment : androidx.fragment.app.Fragment() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val v = inflater.inflate(R.layout.my_fragment, container, false)
        super.onCreate(savedInstanceState)

        return v
    }

    override fun onActivityCreated(savedInstanceState: Bundle?) {

        // Set TabLayout tab names
        mViewPager2!!.adapter = MyAdapter(fragmentManager, lifecycle)
        TabLayoutMediator(mTabLayout, mViewPager2, TabLayoutMediator.TabConfigurationStrategy{ tab, position ->
            when (position) {
                0 -> tab.text = getString(R.string.a)
                1 -> tab.text = getString(R.string.b)
                2 -> tab.text = getString(R.string.c)
                3 -> tab.text = getString(R.string.d)
                4 -> tab.text = getString(R.string.e)
            }
        }).attach()

        super.onActivityCreated(savedInstanceState)
    }

    // Set TabLayout tab classes
    private inner class MyAdapter(fm: FragmentManager?, lifecycle: Lifecycle) : FragmentStateAdapter(fm!!, lifecycle) {
        private val intItems = 5

        override fun createFragment(position: Int): Fragment {
            var fragment: Fragment? = null
            when (position) {
                0 -> fragment = FragmentA()
                1 -> fragment = FragmentB()
                2 -> fragment = FragmentC()
                3 -> fragment = FragmentD()
                4 -> fragment = FragmentE()
            }
            return fragment!!
        }

        override fun getItemCount(): Int {
            return intItems
        }
    }
}

my_fragment.xml (ViewPager2 with Tabs)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/detail_container">

    <include layout="@layout/toolbar" />

    <com.google.android.material.tabs.TabLayout
            android:id="@+id/myTabLayout"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            app:tabMode="scrollable"
            app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget" />

    <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/mViewPager2"
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1" />
</LinearLayout>

Solved, you must create your tabs fragments references once, outside of your FragmentStateAdapter.

you may use ArrayList<Fragment> fragmentList and pass it to your adapter in constructore, and in your adapter will be like this :

override fun createFragment(position: Int): Fragment {
            return fragmentList.get(position);
        }

I think they are confusing us when they named it createFragment