Checkbox component does not work with variables (MT v3)

[Popa-42]

Short Summary

The MT component does not (visually) change its value dynamically with an associated variable.

Steps to Reproduce

This is a short example showing just a <Checkbox> element that should change its checked state every second.

"use client";
import { Checkbox } from "@material-tailwind/react";
import { useState, useEffect } from "react";

export default function CheckboxExample() {
  const [checked, setChecked] = useState(false);

  useEffect(() => {
    const interval = setInterval(() => {
      setChecked((prev) => !prev); // Toggle checked state every second
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  // Render the checkbox with the value of 'checked'
  return (
    <div>
      <Checkbox checked={checked}>
        <Checkbox.Indicator/>
      </Checkbox>
    </div>
  );
}

Expected Behaviour

The checkbox should visually toggle between checked and unchecked states every second.

Actual Behaviour

The visual state of the checkbox does not update dynamically. However, inspecting the underlying (invisible) <input> element shows that its checked attribute does at least toggle this element's state as expected.

It seems the visual state of the <label> element is controlled by the data-checked attribute, which does not update dynamically.

Material Tailwind Version

I used @material-tailwind/react version 3.0.0-beta.24