diff --git a/src/settings/LocationLocations/LocationForm/ServicePointsFields.js b/src/settings/LocationLocations/LocationForm/ServicePointsFields.js
index b94561e..14bf556 100644
--- a/src/settings/LocationLocations/LocationForm/ServicePointsFields.js
+++ b/src/settings/LocationLocations/LocationForm/ServicePointsFields.js
@@ -4,7 +4,6 @@ import { Field } from 'react-final-form';
 import { FieldArray } from 'react-final-form-arrays';
 import PropTypes from 'prop-types';
 import { sortBy, cloneDeep, findIndex } from 'lodash';
-
 import {
   Icon,
   Layout,
@@ -12,10 +11,8 @@ import {
   RepeatableField,
   Select,
 } from '@folio/stripes/components';
-
 import css from './ServicePointsFields.css';
 
-
 const omitUsedOptions = (list, usedValues, key, id) => {
   const unUsedValues = cloneDeep(list);
   if (usedValues) {
@@ -33,10 +30,24 @@ const omitUsedOptions = (list, usedValues, key, id) => {
   return unUsedValues;
 };
 
-const ServicePointsFields = ({ servicePoints, changePrimary, formValues }) => {
-  const list = omitUsedOptions(servicePoints, formValues.servicePointIds, 'selectSP');
+class ServicePointsFields extends React.Component {
+  static propTypes = {
+    servicePoints: PropTypes.arrayOf(PropTypes.object),
+    changePrimary: PropTypes.func.isRequired,
+    formValues: PropTypes.object.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.singlePrimary = this.singlePrimary.bind(this);
+    this.renderFields = this.renderFields.bind(this);
+    this.radioButtonComp = this.radioButtonComp.bind(this);
+    this.list = {};
+  }
+
+  singlePrimary(id) {
+    const { changePrimary, formValues } = this.props;
 
-  const singlePrimary = (id) => {
     formValues.servicePointIds.forEach((a, i) => {
       if (i === id) {
         changePrimary(i, true);
@@ -44,22 +55,25 @@ const ServicePointsFields = ({ servicePoints, changePrimary, formValues }) => {
         changePrimary(i, false);
       }
     });
-  };
+  }
 
-  const radioButtonComp = ({ input, fieldIndex }) => {
+  radioButtonComp({ input, ...props }) {
     return (
       <RadioButton
-        onChange={() => { singlePrimary(fieldIndex); }}
+        onChange={() => { this.singlePrimary(props.fieldIndex); }}
         checked={input.value}
         name={input.name}
-        aria-label={`servicePoint use as primary ${fieldIndex}`}
+        aria-label={`servicePoint use as primary ${props.fieldIndex}`}
       />
     );
-  };
+  }
+
+  renderFields(field, index) {
+    const { formValues } = this.props;
 
-  const renderFields = (field, index) => {
-    const availableOptions = omitUsedOptions(servicePoints, formValues.servicePointIds, 'selectSP', index);
-    const sortedList = sortBy(availableOptions, ['label']);
+    this.list = omitUsedOptions(this.props.servicePoints, formValues.servicePointIds, 'selectSP', index);
+
+    const sortedList = sortBy(this.list, ['label']);
     const options = [{ label: 'Select service point', value: '' }, ...sortedList];
 
     return (
@@ -81,54 +95,52 @@ const ServicePointsFields = ({ servicePoints, changePrimary, formValues }) => {
         </Layout>
         <Layout className={`display-flex ${css.radioButtonLayout}`}>
           <Field
-            component={radioButtonComp}
+            component={this.radioButtonComp}
             fieldIndex={index}
             name={`${field}.primary`}
           />
         </Layout>
       </Layout>
     );
-  };
-
-  // Make the last existing service point to be the primary one
-  if (formValues.servicePointIds && formValues.servicePointIds.length === 1 && !formValues.servicePointIds[0].primary) {
-    singlePrimary(0);
   }
 
-  const legend = (
-    <Layout className="display-flex">
-      <Layout className={`${css.label} ${css.servicePointsLabel}`}>
-        <FormattedMessage id="ui-tenant-settings.settings.location.locations.servicePoints" />
-        <span className={css.asterisk}>*</span>
-      </Layout>
-      <Layout className={`${css.label} ${css.primaryLabel}`}>
-        <FormattedMessage id="ui-tenant-settings.settings.location.locations.primary" />
-      </Layout>
-    </Layout>
-  );
+  render() {
+    const { formValues } = this.props;
 
-  return (
-    <>
-      <FieldArray
-        addLabel={
-          Object.keys(list).length > 1 ?
-            <Icon icon="plus-sign">Add service point</Icon> :
-            ''
-        }
-        legend={legend}
-        emptyMessage={<span className={css.emptyMessage}>Location must have at least one service point</span>}
-        component={RepeatableField}
-        name="servicePointIds"
-        renderField={renderFields}
-      />
-    </>
-  );
-};
+    // make the last existing service point to be the primary one
+    if (formValues.servicePointIds && formValues.servicePointIds.length === 1 && !formValues.servicePointIds[0].primary) {
+      this.singlePrimary(0);
+    }
 
-ServicePointsFields.propTypes = {
-  servicePoints: PropTypes.arrayOf(PropTypes.object),
-  changePrimary: PropTypes.func.isRequired,
-  formValues: PropTypes.object.isRequired,
-};
+    const legend = (
+      <Layout className="display-flex">
+        <Layout className={`${css.label} ${css.servicePointsLabel}`}>
+          <FormattedMessage id="ui-tenant-settings.settings.location.locations.servicePoints" />
+          <span className={css.asterisk}>*</span>
+        </Layout>
+        <Layout className={`${css.label} ${css.primaryLabel}`}>
+          <FormattedMessage id="ui-tenant-settings.settings.location.locations.primary" />
+        </Layout>
+      </Layout>
+    );
+
+    return (
+      <>
+        <FieldArray
+          addLabel={
+            Object.keys(this.list).length > 1 ?
+              <Icon icon="plus-sign">Add service point</Icon> :
+              ''
+          }
+          legend={legend}
+          emptyMessage={<span className={css.emptyMessage}>Location must have at least one service point</span>}
+          component={RepeatableField}
+          name="servicePointIds"
+          renderField={this.renderFields}
+        />
+      </>
+    );
+  }
+}
 
 export default ServicePointsFields;