How to customize MaterialCheckBox in android?

I want to make a circular MaterialCheckBox it works perfectly as circular but the color of the circle is changed this is not the color which I set in ic_checked and ic_unchecked. Here is my code. why this is not picking the vector color

XML layout

 <com.google.android.material.checkbox.MaterialCheckBox
            android:id="@+id/selection_box"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:button="@drawable/custom_checkbox"
            />

drawable/custom_checkbox

<?xml version="1.0" encoding="utf-8"?>
<selector  xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_checked="true"
        android:drawable="@drawable/ic_checked"/>
    <item
        android:state_pressed="true"
        android:drawable="@drawable/ic_checked"/>
    <item
        android:state_pressed="false"
        android:drawable="@drawable/ic_unchecked"/>
</selector>

drawable/ic_checked

<vector android:height="20dp" android:tint="#F44336"
    android:viewportHeight="24.0" android:viewportWidth="24.0"
    android:width="20dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#ffffff" android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM10,17l-5,-5 1.41,-1.41L10,14.17l7.59,-7.59L19,8l-9,9z"/>
</vector>

drawable/ic_unchecked

<vector android:height="20dp" android:tint="#FFFFFF"
    android:viewportHeight="24.0" android:viewportWidth="24.0"
    android:width="20dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#FF000000" android:pathData="M12,2C6.47,2 2,6.47 2,12s4.47,10 10,10 10,-4.47 10,-10S17.53,2 12,2zM12,20c-4.41,0 -8,-3.59 -8,-8s3.59,-8 8,-8 8,3.59 8,8 -3.59,8 -8,8z"/>
</vector>