5 files changed, 13 insertions, 12 deletions

diff --git a/package.json b/package.json
index 9434e41f6..f99eac545 100644
--- a/package.json
+++ b/package.json
@@ -96,7 +96,7 @@
     "mobx": "6.10.0",
     "mobx-localstorage": "1.2.0",
     "mobx-react": "7.6.0",
-    "mobx-react-form": "3.2.0",
+    "mobx-react-form": "6.3.5",
     "moment": "2.29.4",
     "ms": "2.1.3",
     "node-fetch": "2.6.11",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 54deeb821..4c96e3e65 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -150,8 +150,8 @@ dependencies:
     specifier: 7.6.0
     version: 7.6.0(mobx@6.10.0)(react-dom@18.2.0)(react@18.2.0)
   mobx-react-form:
-    specifier: 3.2.0
-    version: 3.2.0(mobx@6.10.0)
+    specifier: 6.3.5
+    version: 6.3.5(mobx@6.10.0)
   moment:
     specifier: 2.29.4
     version: 2.29.4
@@ -9096,8 +9096,8 @@ packages:
       reactive-localstorage: 0.0.2
     dev: false
 
-  /mobx-react-form@3.2.0(mobx@6.10.0):
-    resolution: {integrity: sha512-7ddOvBulXW5VSMpxrok0A1VGZuWgn1cSvQ2HFXK2uMg631/37Anck7ASWEqK3AzKOaaP9/0kr7VCChqvhyotzQ==}
+  /mobx-react-form@6.3.5(mobx@6.10.0):
+    resolution: {integrity: sha512-AsnfL1MC9Jm2wcF6hr7ayZjmqwrYw37LHMRFcjvXkmCSFEXM0/qKPA3/Ex3TOL4gmCEoBVoV/XhhfIuj5csUgQ==}
     engines: {node: '>=8.0.0'}
     peerDependencies:
       mobx: ^6.0.0
diff --git a/src/@types/mobx-react-form.d.ts b/src/@types/mobx-react-form.d.ts
deleted file mode 100644
index 4e19dc1c2..000000000
--- a/src/@types/mobx-react-form.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module 'mobx-react-form';
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>
     );
   }