React-hook-form: how to add logic to the onChange property in a custom input

I am working in a project using react with typescript, and I'm using react-hook-form and the form component that comes with shadcn/ui: https://ui.shadcn.com/docs/components/input#form For my case, I created a custom Input component which has a button inside of it (with a pen icon), which will toggle on and off the **readonly **property of the input, but i want to add another functionality:

• When the user clicks on the pen button to modify the value of the input, I want to replace that button with a submit button once the initial value of that input changes, and only when he clicks on the submit button and the form submits can the input return to being **readonly **again and so on for every input.

The problem is that the onChange property doesn't work on the input to get the value or just to set a state indicating that the value has been changed to replace the buttons, and when I tried to isolate the input by using react-hook-form's hooks such as useFormContext to get the **control ** prop and then pass it as well as the name of the input to the useWatch or useFormState, it triggers countless re-renders. If anyone has any idea or suggestion please help me. Here is the code of my component if anyone wants to modify it:

import * as React from "react";
import { Button } from "@/components/ui/button";
import { Input, type InputProps } from "@/components/ui/input";
import { cn } from "@/lib/utils";
import { Pencil, PencilOff } from "lucide-react";
interface EditableInputProps extends InputProps {
editPermission?: boolean;
}
const EditableInput = React.forwardRef<HTMLInputElement, EditableInputProps>(
({ className, editPermission = true, ...props }, ref) => {
const [canEdit, setCanEdit] = React.useState<boolean>(false);
const disabled = props.disabled || !editPermission;
const handleEdit = () => {
if (!disabled) {
setCanEdit((prev) => !prev);
}
};
return (
<div className="relative">
<Input
ref={ref}
type="text"
readOnly={!canEdit ? true : false}
className={cn("pr-10", className)}
{...props}
/>
<Button
type="button"
variant="ghost"
size="sm"
className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
disabled={disabled}
onClick={() => handleEdit()}
>
{canEdit && !disabled ? (
<Pencil className="h-4 w-4" aria-hidden="true" />
) : (
<PencilOff className="h-4 w-4" aria-hidden="true" />
)}
<span className="sr-only">
{canEdit ? "Can edit input" : "Cannot edit input"}
</span>
</Button>
</div>
);
}
);
EditableInput.displayName = "EditableInput";
export { EditableInput };
// usage in my form
<FormField
control={form.control}
name="order_total"
render={({ field }) => (
<FormItem>
<FormLabel>
Order Total
</FormLabel>
<FormControl>
<EditableInput
{...field}
placeholder="Order Total"
/>
</FormControl>
<FormMessage />
</FormItem>
)}

/>