diff --git a/src/settings/CallNumberBrowseSettings/CallNumberBrowseSettings.js b/src/settings/CallNumberBrowseSettings/CallNumberBrowseSettings.js
index a29a78855..6d212da37 100644
--- a/src/settings/CallNumberBrowseSettings/CallNumberBrowseSettings.js
+++ b/src/settings/CallNumberBrowseSettings/CallNumberBrowseSettings.js
@@ -10,7 +10,6 @@ import {
 import { ControlledVocab } from '@folio/stripes/smart-components';
 import {
   InfoPopover,
-  List,
   LoadingPane,
 } from '@folio/stripes/components';
 import {
@@ -19,9 +18,10 @@ import {
   useUserTenantPermissions,
 } from '@folio/stripes/core';
 
+import { CallNumberTypeList } from './CallNumberTypeList';
+import { CallNumberTypeField } from './CallNumberTypeField';
 import { useCallNumberTypesQuery } from '../../hooks';
 import { CALL_NUMBER_BROWSE_COLUMNS } from './constants';
-import getFieldComponents from './getFieldComponents';
 
 const CallNumberBrowseSettings = () => {
   const stripes = useStripes();
@@ -82,15 +82,6 @@ const CallNumberBrowseSettings = () => {
     [CALL_NUMBER_BROWSE_COLUMNS.TYPE_IDS]: item[CALL_NUMBER_BROWSE_COLUMNS.TYPE_IDS].map(type => type.id),
   }), []);
 
-  const renderCallNumberTypes = (types = []) => (
-    <List
-      items={types}
-      itemFormatter={type => <li>{type?.label}</li>}
-      listStyle="bullets"
-      marginBottom0
-    />
-  );
-
   if (!hasRequiredPermissions) {
     return null;
   }
@@ -115,7 +106,7 @@ const CallNumberBrowseSettings = () => {
         columnMapping={columnMapping}
         hiddenFields={[CALL_NUMBER_BROWSE_COLUMNS.SHELVING_ALGORITHM, 'lastUpdated', 'numberOfObjects']}
         formatter={{
-          [CALL_NUMBER_BROWSE_COLUMNS.TYPE_IDS]: ({ typeIds }) => renderCallNumberTypes(typeIds),
+          [CALL_NUMBER_BROWSE_COLUMNS.TYPE_IDS]: CallNumberTypeList,
         }}
         readOnlyFields={[CALL_NUMBER_BROWSE_COLUMNS.NAME]}
         nameKey="name"
@@ -123,7 +114,15 @@ const CallNumberBrowseSettings = () => {
         id="call-number-browse"
         preUpdateHook={formatItemForSaving}
         editable
-        fieldComponents={getFieldComponents(fieldLabels, callNumberTypeOptions)}
+        fieldComponents={{
+          [CALL_NUMBER_BROWSE_COLUMNS.TYPE_IDS]: (callNumberTypeProps) => (
+            <CallNumberTypeField
+              {...callNumberTypeProps}
+              fieldLabels={fieldLabels}
+              callNumberTypeOptions={callNumberTypeOptions}
+            />
+          ),
+        }}
         canCreate={false}
         parseRow={formatRowData}
         actionSuppressor={{
diff --git a/src/settings/CallNumberBrowseSettings/CallNumberTypeField.js b/src/settings/CallNumberBrowseSettings/CallNumberTypeField.js
new file mode 100644
index 000000000..b07902659
--- /dev/null
+++ b/src/settings/CallNumberBrowseSettings/CallNumberTypeField.js
@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+
+import { Field } from 'react-final-form';
+
+import { MultiSelection } from '@folio/stripes/components';
+
+export const CallNumberTypeField = ({
+  fieldProps,
+  name,
+  rowIndex,
+  fieldIndex,
+  fieldLabels,
+  callNumberTypeOptions,
+}) => {
+  return (
+    <Field
+      {...fieldProps}
+      component={MultiSelection}
+      aria-label={`${fieldLabels[name]} ${rowIndex}`}
+      placeholder={fieldLabels[name]}
+      marginBottom0
+      renderToOverlay
+      valueFormatter={({ option }) => option.label}
+      dataOptions={callNumberTypeOptions}
+      autoFocus={fieldIndex === 0}
+    />
+  );
+};
+
+CallNumberTypeField.propTypes = {
+  fieldProps: PropTypes.object.isRequired,
+  name: PropTypes.string.isRequired,
+  rowIndex: PropTypes.number.isRequired,
+  fieldIndex: PropTypes.number.isRequired,
+  fieldLabels: PropTypes.object.isRequired,
+  callNumberTypeOptions: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    label: PropTypes.string.isRequired,
+  })),
+};
diff --git a/src/settings/CallNumberBrowseSettings/CallNumberTypeList.js b/src/settings/CallNumberBrowseSettings/CallNumberTypeList.js
new file mode 100644
index 000000000..1ef8e4a5f
--- /dev/null
+++ b/src/settings/CallNumberBrowseSettings/CallNumberTypeList.js
@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+
+import { List } from '@folio/stripes/components';
+
+export const CallNumberTypeList = ({ typeIds = [] }) => {
+  return (
+    <List
+      items={typeIds}
+      itemFormatter={type => <li>{type?.label}</li>}
+      listStyle="bullets"
+      marginBottom0
+    />
+  );
+};
+
+CallNumberTypeList.propTypes = {
+  typeIds: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+  })),
+};
diff --git a/src/settings/CallNumberBrowseSettings/getFieldComponents.js b/src/settings/CallNumberBrowseSettings/getFieldComponents.js
deleted file mode 100644
index e2bfa7183..000000000
--- a/src/settings/CallNumberBrowseSettings/getFieldComponents.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/* eslint-disable react/prop-types */
-import { Field } from 'react-final-form';
-
-import { MultiSelection } from '@folio/stripes/components';
-
-import { CALL_NUMBER_BROWSE_COLUMNS } from './constants';
-
-const getFieldComponents = (fieldLabels, classificationIdentifierTypes) => ({
-  [CALL_NUMBER_BROWSE_COLUMNS.TYPE_IDS]: ({ fieldProps, name, rowIndex, fieldIndex }) => (
-    <Field
-      {...fieldProps}
-      component={MultiSelection}
-      aria-label={`${fieldLabels[name]} ${rowIndex}`}
-      placeholder={fieldLabels[name]}
-      marginBottom0
-      renderToOverlay
-      valueFormatter={({ option }) => option.label}
-      dataOptions={classificationIdentifierTypes}
-      autoFocus={fieldIndex === 0}
-    />
-  ),
-});
-
-export default getFieldComponents;