Change FAB background color with MotionLayout and MotionScene

I have a FloatingActionButton that I want to transition to another color with the use of MotionLayout and MotionScene.

This is my FAB in my layout file

<androidx.constraintlayout.motion.widget.MotionLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/motion_layout"
        app:layoutDescription="@xml/map_activity_scene"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="75dp"
            android:layout_marginEnd="32dp"
            android:id="@+id/fab"
            android:visibility="invisible"
            app:backgroundTint="@color/lightPurple"
            app:srcCompat="@drawable/ic_layers_24px"
            app:tint="@color/white"
            app:layout_constraintBottom_toBottomOf="@+id/map"
            app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.motion.widget.MotionLayout>

And this is my MotionScene

<MotionScene xmlns:app="http://schemas.android.com/apk/res-auto"
             xmlns:android="http://schemas.android.com/apk/res/android">
    <Transition
            app:constraintSetStart="@+id/start"
            app:constraintSetEnd="@+id/end"
            app:duration="400">

    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="75dp"
                    android:layout_marginEnd="32dp"
                    android:id="@+id/fab"
                    android:visibility="visible"
                    app:backgroundTint="@color/lightPurple"
                    app:srcCompat="@drawable/ic_layers_24px"
                    app:tint="@color/white"
                    app:layout_constraintBottom_toBottomOf="@+id/map"
                    app:layout_constraintEnd_toEndOf="parent">

            <CustomAttribute
                app:attributeName="backgroundTint"
                app:customColorValue="@color/lightPurple" />
        </Constraint>

    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
                android:id="@+id/fab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:visibility="visible"
                app:backgroundTint="@color/map_fab_transform"
                app:layout_constraintEnd_toEndOf="@+id/revealLayout"
                app:layout_constraintStart_toStartOf="@+id/revealLayout"
                app:layout_constraintBottom_toBottomOf="@+id/revealLayout"
                app:layout_constraintTop_toTopOf="@+id/revealLayout">

            <CustomAttribute
                app:attributeName="backgroundTint"
                app:customColorValue="@color/map_fab_transform" />
        </Constraint>
    </ConstraintSet>
</MotionScene>

When I run the scene the fab moves to its correct place but the color does not change nor does the icon get removed from it. It seems that any of the app properties do not get applied.

How do I change to color of the fab and remove the icon in the fab with MotionLayout?