fix(frontend): new radarr/sonarr ports will be converted to a number before posting

src/components/Common/Modal/index.tsx

@@ -63,9 +63,7 @@ const Modal: React.FC<ModalProps> = ({
   });
   useLockBodyScroll(true, disableScrollLock);
 
-  return (
+  return ReactDOM.createPortal(
-    <>
-      {ReactDOM.createPortal(
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div
       className="fixed top-0 left-0 right-0 bottom-0 bg-gray-800 bg-opacity-50 w-full h-full z-50 flex justify-center items-center"
@@ -181,8 +179,6 @@ const Modal: React.FC<ModalProps> = ({
       </Transition>
     </div>,
     document.body
-      )}
-    </>
   );
 };
 

src/components/Settings/RadarrModal/index.tsx

@@ -108,7 +108,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
           {
             hostname,
             apiKey,
-            port,
+            port: Number(port),
             baseUrl,
             useSsl,
           }

src/components/Settings/SonarrModal/index.tsx

@@ -111,7 +111,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
           {
             hostname,
             apiKey,
-            port,
+            port: Number(port),
             baseUrl,
             useSsl,
           }

src/hooks/useClickOutside.ts

@@ -15,7 +15,7 @@ const useClickOutside = (
 ): void => {
   useEffect(() => {
     const handleBodyClick = (e: MouseEvent) => {
-      if (!ref.current?.contains(e.target as Node)) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
         callback(e);
       }
     };