Extract PickList wrapper from elements index

components/elements/fields/pickListField.js

@@ -0,0 +1,29 @@
+import React from "react";
+import useTranslation from "next-translate/useTranslation";
+import { Field } from "redux-form";
+import { RenderPickList } from "./renderPickList";
+
+export function PickList(props) {
+    const { datafieldname } = props;
+    let { t } = useTranslation();
+
+    const required = (value) => {
+        return value || value == 0
+            ? undefined
+            : t("newappeal:is-required-label");
+    };
+
+    return (
+        <Field
+            name={props.name}
+            id={props.name}
+            label={props.label}
+            component={RenderPickList}
+            datafieldname={datafieldname}
+            picklistData={props.picklistData}
+            hint={props.hint}
+            errorMsg={t("newappeal:is-required-label")}
+            validate={[required]}
+        />
+    );
+}

components/elements/index.js

@@ -23,11 +23,12 @@ import { RenderDatePicker } from "./fields/renderDatePicker";
 import { RenderYesNo } from "./fields/renderYesNo";
 import { RenderRadio } from "./fields/renderRadio";
 import { RenderCheckBox } from "./fields/renderCheckBox";
-import { RenderPickList } from "./fields/renderPickList";
+import { PickList } from "./fields/pickListField";
 import { RenderDecimalField } from "./fields/renderDecimalField";
 import { RenderFileUpload } from "./fields/renderFileUpload";
 export { RenderSubFields } from "./fields/renderSubFields";
 export { FieldArrayForm } from "./fields/fieldArrayForm";
+export { PickList };
 
 const getValidationMessages = (t) => ({
     requiredMessage: t("newappeal:is-required-label"),
@@ -821,29 +822,6 @@ export function CheckBoxfield(props) {
     );
 }
 
-export function PickList(props) {
-    const { name, label, datafieldname, hint } = props;
-    let { t } = useTranslation();
-    const required = (value) => {
-        return value || value == 0
-            ? undefined
-            : t("newappeal:is-required-label");
-    };
-    return (
-        <Field
-            name={props.name}
-            id={props.name}
-            label={props.label}
-            component={RenderPickList}
-            datafieldname={datafieldname}
-            picklistData={props.picklistData}
-            hint={props.hint}
-            errorMsg={t("newappeal:is-required-label")}
-            validate={[required]}
-        />
-    );
-}
-
 export function NumericField(props) {
     const {
         name,