ERM-3041 Dashboard: the "unsaved changes" confirmation modal is missing

* pass string instead of object to ConfirmationModals heading

lib/hooks/useErmForm.js

@@ -4,7 +4,7 @@ import { Form as FinalForm, FormSpy } from 'react-final-form';
 import { useHistory } from 'react-router-dom';
 import createDecorator from 'final-form-focus';
 import arrayMutators from 'final-form-arrays';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { LastVisitedContext } from '@folio/stripes/core';
 import { ConfirmationModal } from '@folio/stripes/components';
 
@@ -16,6 +16,7 @@ const useErmForm = ({ navigationCheck = true } = {}) => {
   const [dirty, setDirty] = useState(false);
 
   const history = useHistory();
+  const intl = useIntl();
 
   useEffect(() => {
     if (navigationCheck) {
@@ -80,7 +81,7 @@ const useErmForm = ({ navigationCheck = true } = {}) => {
           <ConfirmationModal
             cancelLabel={<FormattedMessage id="stripes-form.closeWithoutSaving" />}
             confirmLabel={<FormattedMessage id="stripes-form.keepEditing" />}
-            heading={<FormattedMessage id="stripes-form.areYouSure" />}
+            heading={intl.formatMessage({ id: 'stripes-form.areYouSure' })}
             id="cancel-editing-confirmation"
             message={<FormattedMessage id="stripes-form.unsavedChanges" />}
             onCancel={() => continueNavigation(ctx)}