Error after placing DevTools component in React TS

[mohammed-hasan007]

  const form = useForm({
    resolver: yupResolver(Yup.object(filterSchema).required()),
    defaultValues: filter,
  });
  const {
    register,
    handleSubmit,
    reset,
    getValues,
    watch,
    setValue,
    setFocus,
    control,
  } = form;

  return (
       <>
            <FormContainer>
                <DevTool control={control} />
           </FormContainer>
      </>
  );

This is my code. I am trying to use DevTools but it is throwing this error

index.cjs.development.js:194 Uncaught TypeError: updateFormState is not a function at shouldRenderFormState (index.cjs.development.js:194:1) at Object.next (index.cjs.development.js:278:1) at Object.next (index.esm.mjs:873:1) at reset (index.esm.mjs:2062:1) at index.tsx:141:5 at invokePassiveEffectCreate (react-dom.development.js:23487:1) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1) at invokeGuardedCallback (react-dom.development.js:4056:1) at flushPassiveEffectsImpl

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

If I remove the DevTools component, then it runs fine. Can someone please help me..

[LinnJS]

I am getting a similar but different error

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'subscribe')

Call Stack
eval
node_modules/@hookform/devtools/dist/index.cjs.development.js (184:0)
commitHookEffectListMount
node_modules/react-dom/cjs/react-dom.development.js (23150:0)
commitPassiveMountOnFiber
node_modules/react-dom/cjs/react-dom.development.js (24926:0)
commitPassiveMountEffects_complete
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js (24886:9)
commitPassiveMountEffects_begin
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js (24873:7)
commitPassiveMountEffects
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js (24861:3)
flushPassiveEffectsImpl
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js (27034:3)
flushPassiveEffects
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js (26979:14)
performSyncWorkOnRoot
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js (26071:3)
flushSyncCallbacks
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js (12042:22)
commitRootImpl
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js (26954:3)
commitRoot
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js (26677:5)
finishConcurrentRender
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js (25976:9)
performConcurrentWorkOnRoot
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js (25804:7)
workLoop
webpack-internal:///./node_modules/scheduler/cjs/scheduler.development.js (266:34)
flushWork
webpack-internal:///./node_modules/scheduler/cjs/scheduler.development.js (239:14)
MessagePort.performWorkUntilDeadline
webpack-internal:///./node_modules/scheduler/cjs/scheduler.development.js (533:21)

[jcmnavia]

Does anyone got a solution for this?

[mohammed-hasan007]

Nope

[afilp]

I also get errors when combined with YUP:

yup.js?v=f0f60f4d:849 Uncaught (in promise) TypeError: The value of field could not be cast to a value that satisfies the schema type: "date". 

attempted value: [
  "undefined"
] 
result of cast: Invalid Date

And I do not even have a "date" field in my form.

The same behavior: If I remove the DevTools component, then it runs fine. Can someone please help me..