Shared Element Transition of CardView inside GridLayout Not working

I am trying to make a transition like this one that scales a grid layouts cardview child (which is inside a fragment) to another cardview inside the new fragment.

I have followed all the instructions on the android guide and have no progress. I don't know what I am doing wrong or what I have misunderstood.

Here are the relevant pieces of code.

fragment_small_ad_page.xml

<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingHorizontal="15.7dp"
    tools:context=".SmallAdPage"
    android:animateLayoutChanges="true">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/smallAdRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="530dp"
        android:layout_marginTop="40dp"
        android:layout_marginBottom="30dp"
        tools:listitem="@layout/recyclerview_ad_image_item"
        />

    <fragment
        android:id="@+id/appFragment"
        android:name="com.example.hubosandroid.AppsFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/smallAdRecyclerView"/>

</RelativeLayout>

fragment_apps.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".AppsFragment">

    <GridLayout
        android:id="@+id/apps_grid_layout"
        android:layout_below="@id/smallAdRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnCount="5"
        android:rowCount="8"
        android:animateLayoutChanges="true">

        <androidx.cardview.widget.CardView
            android:id="@+id/first"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_rowSpan="2"
            android:layout_rowWeight="2"
            android:layout_columnSpan="1"
            android:layout_columnWeight="1"
            android:layout_margin="5dp"
            app:cardBackgroundColor="@color/yellow"
            app:cardCornerRadius="10dp">

        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:id="@+id/second"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_rowSpan="2"
            android:layout_rowWeight="2"
            android:layout_columnSpan="1"
            android:layout_columnWeight="1"
            android:layout_margin="5dp"
            app:cardBackgroundColor="@color/white"
            app:cardCornerRadius="10dp"></androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:id="@+id/third"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_rowSpan="4"
            android:layout_rowWeight="4"
            android:layout_columnSpan="2"
            android:layout_columnWeight="2"
            android:layout_margin="5dp"
            app:cardBackgroundColor="@color/white"
            app:cardCornerRadius="10dp">

        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:id="@+id/fourth"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_rowSpan="4"
            android:layout_rowWeight="4"
            android:layout_columnSpan="1"
            android:layout_columnWeight="1"
            android:layout_margin="5dp"
            app:cardBackgroundColor="@color/white"
            app:cardCornerRadius="10dp">

        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:id="@+id/fifth"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_rowSpan="2"
            android:layout_rowWeight="2"
            android:layout_columnSpan="2"
            android:layout_columnWeight="2"
            android:layout_margin="5dp"
            app:cardBackgroundColor="@color/white"
            app:cardCornerRadius="10dp">

        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:id="@+id/sixth"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_rowSpan="1"
            android:layout_rowWeight="1"
            android:layout_columnSpan="2"
            android:layout_columnWeight="2"
            android:layout_margin="5dp"
            app:cardBackgroundColor="@color/white"
            app:cardCornerRadius="10dp">

        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:id="@+id/seventh"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_rowSpan="2"
            android:layout_rowWeight="2"
            android:layout_columnSpan="3"
            android:layout_columnWeight="3"
            android:layout_margin="5dp"
            app:cardBackgroundColor="@color/white"
            app:cardCornerRadius="10dp">

        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:id="@+id/eighth"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_rowSpan="1"
            android:layout_rowWeight="1"
            android:layout_columnSpan="2"
            android:layout_columnWeight="2"
            android:layout_margin="5dp"
            app:cardBackgroundColor="@color/white"
            app:cardCornerRadius="10dp">

        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:id="@+id/ninth"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_rowSpan="2"
            android:layout_rowWeight="2"
            android:layout_columnSpan="5"
            android:layout_columnWeight="5"
            android:layout_margin="5dp"
            app:cardBackgroundColor="@color/white"
            app:cardCornerRadius="10dp">

        </androidx.cardview.widget.CardView>


    </GridLayout>

</FrameLayout>

fragment_game_selection.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/teal_200"
    tools:context=".ui.mainActivity.fragments.GameSelectionFragment">

    <androidx.cardview.widget.CardView
        android:id="@+id/appCard"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:cardCornerRadius="15dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="@string/hello_blank_fragment" />
        
    </androidx.cardview.widget.CardView>

</FrameLayout>

AppsFragment.kt

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        binding = FragmentAppsBinding.inflate(layoutInflater)
        val view = binding.root

        binding.appsGridLayout.forEach {
            ViewCompat.setTransitionName(it as CardView, it.id.toString())
            it.setOnClickListener {
                parentFragmentManager.commit {
                    val newScreen = GameSelectionFragment()
                    setReorderingAllowed(true)
                    addSharedElement(it as CardView, "scale_transition")
                    replace(R.id.appFragment, newScreen)
                    addToBackStack(null)
                }
            }
        }
        return view
    }

GameSelectionFragment.kt

class GameSelectionFragment : Fragment() {
    private lateinit var binding: FragmentGameSelectionBinding


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        sharedElementEnterTransition = TransitionInflater.from(requireContext())
            .inflateTransition(R.transition.scale_transition.xml)
    }


    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        postponeEnterTransition()
        binding = FragmentGameSelectionBinding.inflate(layoutInflater)
        val view = binding.root
        ViewCompat.setTransitionName(binding.appCard, "scale_transition")
        startPostponedEnterTransition()
        return view
    }
}

scale_transition.xml

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android" android:duration="300">
    <changeBounds/>
    <changeTransform/>
</transitionSet>

Would appreciate any help. Thanks.