Use rome and initial format

src/components/Form/FormToggle.tsx

@@ -1,9 +1,10 @@
+import { Switch } from "../UI/Switch.js";
 import type {
   BaseFormBuilderProps,
-  GenericFormElementProps
+  GenericFormElementProps,
 } from "./DynamicForm.js";
-import { Controller, FieldValues } from "react-hook-form";
-import { Switch } from "../UI/Switch.js";
+import { ChangeEvent } from "react";
+import { Controller, FieldPathValue, FieldValues } from "react-hook-form";
 
 export interface ToggleFieldProps<T> extends BaseFormBuilderProps<T> {
   type: "toggle";
@@ -12,8 +13,18 @@ export interface ToggleFieldProps<T> extends BaseFormBuilderProps<T> {
 export function ToggleInput<T extends FieldValues>({
   control,
   disabled,
-  field
+  field,
 }: GenericFormElementProps<T, ToggleFieldProps<T>>) {
+  const onChangeHandler = (e: (event: ChangeEvent) => void) => {
+    return (value: boolean) => {
+      e({
+        target: {
+          value: value,
+        },
+      } as unknown as ChangeEvent);
+    };
+  };
+
   return (
     <Controller
       name={field.name}
@@ -21,7 +32,7 @@ export function ToggleInput<T extends FieldValues>({
       render={({ field: { value, onChange, ...rest } }) => (
         <Switch
           checked={value}
-          onCheckedChange={onChange}
+          onCheckedChange={onChangeHandler(onChange)}
           disabled={disabled}
           {...field.properties}
           {...rest}