How do I change the standard button icon to checkbox in Android?

My fragment markup:

<com.google.android.material.checkbox.MaterialCheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@drawable/state"
        android:padding="10dp"
        android:text="Hello" />

Xml's for the button:

state.xml

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

ic_checkbox_done.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="21dp"
    android:height="21dp"
    android:viewportWidth="21"
    android:viewportHeight="21">
  <path
      android:pathData="M10.5,0L10.5,0A10.5,10.5 0,0 1,21 10.5L21,10.5A10.5,10.5 0,0 1,10.5 21L10.5,21A10.5,10.5 0,0 1,0 10.5L0,10.5A10.5,10.5 0,0 1,10.5 0z"
      android:fillColor="#EFEFEF"/>
  <path
      android:pathData="M9.0261,12.7011L7.1886,10.8636C7.0916,10.7653 6.9592,10.71 6.8211,10.71C6.683,10.71 6.5507,10.7653 6.4536,10.8636C6.2489,11.0683 6.2489,11.3938 6.4536,11.5986L8.6534,13.7983C8.8581,14.0031 9.1889,14.0031 9.3936,13.7983L14.9586,8.2386C15.1634,8.0338 15.1634,7.7083 14.9586,7.5036C14.8616,7.4053 14.7292,7.35 14.5911,7.35C14.453,7.35 14.3207,7.4053 14.2236,7.5036L9.0261,12.7011Z"
      android:fillColor="#A6A4A4"/>
</vector>

ic_checkbox_tick.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="21dp"
    android:height="21dp"
    android:viewportWidth="21"
    android:viewportHeight="21">
  <path
      android:pathData="M10.5,0L10.5,0A10.5,10.5 0,0 1,21 10.5L21,10.5A10.5,10.5 0,0 1,10.5 21L10.5,21A10.5,10.5 0,0 1,0 10.5L0,10.5A10.5,10.5 0,0 1,10.5 0z"
      android:fillColor="#FDC71A"/>
  <path
      android:pathData="M9.0261,12.7011L7.1886,10.8636C7.0916,10.7653 6.9592,10.71 6.8211,10.71C6.683,10.71 6.5507,10.7653 6.4536,10.8636C6.2489,11.0683 6.2489,11.3938 6.4536,11.5986L8.6534,13.7983C8.8581,14.0031 9.1889,14.0031 9.3936,13.7983L14.9586,8.2386C15.1634,8.0338 15.1634,7.7083 14.9586,7.5036C14.8616,7.4053 14.7292,7.35 14.5911,7.35C14.453,7.35 14.3207,7.4053 14.2236,7.5036L9.0261,12.7011Z"
      android:fillColor="#EFEFEF"/>
</vector>

The result is not displayed: https://i.stack.imgur.com/4wWb1.png https://i.stack.imgur.com/tXTxc.png

The theme I used: Theme.MaterialComponents.DayNight.NoActionBar