After Androidx migration MaterialCardView wont't be affected by it's style

Question

I'm developing new android app that shows coffee drinks using google material design components. after I migrate my project to Androidx the style won't applying to MaterialCardView IDK what the problem or why this is happening!!.

I tried to upgrade my gradle files, using latest material library version and search over the web couldn't see any similar problem.

 <!--this is the card layout:-->

    <com.google.android.material.card.MaterialCardView  xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coffee_card"
    style="@style/CoffeeItemStyle"
    android:layout_width="180dp"
    android:layout_height="200dp"
    android:layout_marginLeft="16dp"
    android:layout_marginTop="@dimen/cardview_margin"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="@dimen/cardview_margin">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <ImageView
            android:id="@+id/coffee_image"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:contentDescription="@string/coffee_drink_image"
            android:scaleType="centerCrop"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/coffee_name"
            style="@style/CoffeeNameStyle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="24dp"
            android:layout_marginTop="8dp"
            android:text="Name"
            app:layout_constraintBottom_toTopOf="@+id/coffee_image"
            app:layout_constraintStart_toStartOf="@+id/coffee_image"
            app:layout_constraintTop_toBottomOf="@+id/coffee_image"
            app:layout_constraintVertical_bias="0.82" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    </com.google.android.material.card.MaterialCardView>

<!--this is the style(CoffeeItemStyle):-->

     <style name="CoffeeItemStyle"     parent="Widget.MaterialComponents.CardView">
        <item name="cardBackgroundColor">@android:color/white</item>
        <item name="cardCornerRadius">@dimen/cardview_radius</item>
        <item name="cardElevation">@dimen/cardview_elevation</item>
        <item name="android:clickable">true</item>
        <item name="android:stateListAnimator">
            @animator/shr_next_button_state_list_anim
        </item>

    </style>

I expect the card view to appear in 4dp radius, 8dp elevation, white background and changing the Z-axis when the card view is clicked.

the image below shows what It looks like after the migration