Checkbox is Dirty Is Not Working

[makhdum530]

<Controller
name="isGsts" // Specify the field name
control={control} // Pass the control prop from useForm
defaultValue={false} // Set the default value as needed
render={({ field }) => (
<Switch
value={isGst} // Map the value to the field's value
onChange={(e) => {
setIsGst(!isGst)
}}

                        id="isGsts"
                        activeClass="bg-blue-900 dark:bg-blue-900"
                      />
                    )}
                  />
                  And My Switch Code is
                  import React from "react";

import Icon from "@/components/ui/Icon";

const Switch = ({
prevIcon,
nextIcon,
label,
id,
disabled,
value,
onChange,
activeClass = "bg-slate-900 dark:bg-slate-900",
wrapperClass = " ",
labelClass = "text-slate-500 dark:text-slate-400 text-sm leading-6",
badge,
}) => {
return (

<label
className={
flex items-center ${ disabled ? " cursor-not-allowed opacity-50" : "cursor-pointer " } +
"" +
wrapperClass
}
id={id}
>

<div
className={relative inline-flex h-6 w-[46px] ltr:mr-3 rtl:ml-3 items-center rounded-full transition-all duration-150 ${value ? activeClass : "bg-secondary-500"} }
>
{badge && value && (

{prevIcon ? (

) : (
on
)}

)}
{badge && !value && (

{nextIcon ? (

) : (
Off
)}

)}

      <span
        className={`inline-block h-5 w-5 transform rounded-full bg-white transition-all duration-150 
      ${
        value
          ? "ltr:translate-x-6 rtl:-translate-x-6"
          : "ltr:translate-x-[2px] rtl:-translate-x-[2px]"
      }
      `}
      />
    </div>
    {label && <span className={labelClass}>{label}</span>}
  </label>
</div>

);
};

export default Switch;