chore: upgrade mobx-react-form to latest

- upgrade mobx-react-form from v3 to v6
- remove stub mobx-react-form.d.ts since the dependency is written in TS now
- remove as any cast for new Form invocation in invite.tsx
- reuse Error component in Radio.tsx to get validation error message in red
- use FieldInterface type for field property instead of typeof Field in Radio.tsx

2 files changed, 8 insertions, 6 deletions

diff --git a/src/components/auth/Invite.tsx b/src/components/auth/Invite.tsx
index 4f2cb19fe..0d39d861a 100644
--- a/src/components/auth/Invite.tsx
+++ b/src/components/auth/Invite.tsx
@@ -86,8 +86,7 @@ class Invite extends Component<IProps, IState> {
               },
             },
           }),
-          // TODO: [TS DEBT] need to fix this type once mobx-react-form is updated to next version
-        ] as any,
+        ],
       },
     });
   }
diff --git a/src/components/ui/Radio.tsx b/src/components/ui/Radio.tsx
index b5be64c5d..1f41deedc 100644
--- a/src/components/ui/Radio.tsx
+++ b/src/components/ui/Radio.tsx
@@ -1,10 +1,11 @@
 import { Component } from 'react';
 import { observer } from 'mobx-react';
-import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
+import FieldInterface from 'mobx-react-form/lib/models/FieldInterface';
+import Error from './error';
 
 type Props = {
-  field: typeof Field;
+  field: FieldInterface;
   className: string;
   focus: boolean;
   showLabel: boolean;
@@ -47,7 +48,8 @@ class Radio extends Component<Props> {
           </label>
         )}
         <div className="franz-form__radio-wrapper">
-          {field.options.map(type => (
+          {/* @ts-expect-error Property 'map' does not exist on type 'OptionsModel'. */}
+          {field.options?.map(type => (
             <label
               key={type.value}
               htmlFor={`${field.id}-${type.value}`}
@@ -68,7 +70,8 @@ class Radio extends Component<Props> {
             </label>
           ))}
         </div>
-        {field.error && <div className="franz-form__error">{field.error}</div>}
+
+        {field.error && <Error message={field.error} />}
       </div>
     );
   }