fix(front): fix provider access error

gui/frontend/src/components/organisms/ConvertForm/ConvertForm.tsx

@@ -92,7 +92,6 @@ export function ConvertForm() {
     });
   };
 
-  const pathFields = useInputPathFields();
   const modInfoFields = useModInfoFields();
   const checkFields = useCheckFields();
 
@@ -114,9 +113,7 @@ export function ConvertForm() {
             {t('all-clear-btn')}
           </Button>
 
-          {pathFields.map((props) => {
-            return <InputPathField key={props.name} {...props} />;
-          })}
+          <InputPathFields />
 
           <Grid columnSpacing={1} container={true} gap={2} sx={{ width: '100%' }}>
             {modInfoFields.map((props) => {
@@ -139,3 +136,15 @@ export function ConvertForm() {
     </FormProvider>
   );
 }
+
+// NOTE: It is necessary to call `useFormContext` in `FormProvider` since it is called internally.
+//       This avoids the wrapper component wrapping inaccessibility error.
+const InputPathFields = () => {
+  const pathFields = useInputPathFields();
+
+  return (
+    pathFields.map((props) => {
+      return <InputPathField key={props.name} {...props} />
+    })
+  )
+}

gui/frontend/src/components/organisms/ConvertForm/useInputPathField.tsx

@@ -9,6 +9,7 @@ import type { FormProps } from './ConvertForm';
 import type { InputPathField } from './InputPathField';
 import type { ComponentPropsWithRef } from 'react';
 
+/** NOTE: Must be called in `FormProvider` as it calls `useFormContext` internally */
 export const useInputPathFields = () => {
   const { t } = useTranslation();
   const { setValue, getValues } = useFormContext<FormProps>();