Cannot assign to read only property 'watch' of object '#<Object>'

[deejaygeroso]

Hi Guys,

Version: react-hook-form 7.51.3

The Issue with Error Message:

The app is not rendering due to this.

Similar Problem:
TypeError: Cannot assign to read only property of object
But the difference is the issue seems to be coming from react-hook-form package itself

Our Workaround:

import { useForm, FormProvider } from 'react-hook-form';
  
function ReactUIWithReactHookForm(){
   const hookForm = useForm();
   
   // Temporary workaround
   const { watch, ...hookFormWithoutWatch } = hookForm;
   return (
   <>
    {/* Excluding watch method in the form's context */}
    {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
    <FormProvider {...(hookFormWithoutWatch as any)}>
        {/* ... code */}
        
        {/* If you were to use `watch method`, you will need to pass
           * `hookForm or watch method` to child props and call `hookForm.watch()`
           */}
        <InputField hookForm={hookForm} />
         
        {/* ... code */}
     </FormProvider>
   </>
  )
}

export default ReactUIWithReactHookForm

App Architecture Diagram Overview

The react-hook-form only FAILS in our kendo app if watch method is provided in FormProvider context

Web Component Wrapper

import React from 'react';
import ReactDOM from 'react-dom';
import ReactUIWithReactHookForm from './ReactUIWithReactHookForm';

function AppWebComponent(el: Element | DocumentFragment) {
  ReactDOM.render(
    <React.StrictMode>
        <ReactUIWithReactHookForm />
    </React.StrictMode>,
    el,
  );
}

export default AppWebComponent;

How App is injected in Kendo App

import AppWebComponent from '@our-ui-package'

const el = document.getElementById("react-ui-with-react-hook-form");
     
AppWebComponent(el);

Question:

• Any ideas how our team can debug this or resolve the issue?
• Is there an issue with watch method being mutated in react-hook-form package?