diff --git a/src/openforms/js/components/admin/form_design/form-creation-form.js b/src/openforms/js/components/admin/form_design/form-creation-form.js
index e887a0f442..acb9ea330f 100644
--- a/src/openforms/js/components/admin/form_design/form-creation-form.js
+++ b/src/openforms/js/components/admin/form_design/form-creation-form.js
@@ -1072,14 +1072,7 @@ const FormCreationForm = ({formUuid, formUrl, formHistoryUrl, outgoingRequestsUr
     }
   }, [loading]);
 
-  const [UserVariableConfirmationModal, confirmUserVariableChange] = useConfirm(
-    intl.formatMessage({
-      description:
-        'Changing user variable data type and transforming initial value confirmation message',
-      defaultMessage:
-        'Changing the data type requires the initial value to be changed. This will reset the initial value back to the empty value. Are you sure that you want to do this?',
-    })
-  );
+  const {ConfirmationModal, confirmationModalProps, openConfirmationModal} = useConfirm();
 
   /**
    * Functions for handling events
@@ -1265,7 +1258,7 @@ const FormCreationForm = ({formUuid, formUrl, formHistoryUrl, outgoingRequestsUr
     }
 
     // Check if the dataType change is intentional.
-    if (propertyName === 'dataType' && !(await confirmUserVariableChange())) {
+    if (propertyName === 'dataType' && !(await openConfirmationModal())) {
       return;
     }
 
@@ -1567,7 +1560,15 @@ const FormCreationForm = ({formUuid, formUrl, formHistoryUrl, outgoingRequestsUr
         </Tabs>
       </FormContext.Provider>
 
-      <UserVariableConfirmationModal />
+      <ConfirmationModal
+        {...confirmationModalProps}
+        message={
+          <FormattedMessage
+            description="Changing user variable data type and transforming initial value confirmation message"
+            defaultMessage="Changing the data type requires the initial value to be changed. This will reset the initial value back to the empty value. Are you sure that you want to do this?"
+          />
+        }
+      />
       <FormSubmit onSubmit={onSubmit} displayActions={!state.newForm} />
     </ValidationErrorsProvider>
   );
diff --git a/src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiOptionsFormFields.js b/src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiOptionsFormFields.js
index 2ed6341153..a9828d1ee9 100644
--- a/src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiOptionsFormFields.js
+++ b/src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiOptionsFormFields.js
@@ -36,8 +36,16 @@ const ObjectsApiOptionsFormFields = ({name, apiGroupChoices}) => {
     description: 'Objects API registration backend: v2 switch warning message',
   });
 
-  const [ConfirmationModalV1, confirmUsingV1] = useConfirm(v1SwitchMessage);
-  const [ConfirmationModalV2, confirmUsingV2] = useConfirm(v2SwitchMessage);
+  const {
+    ConfirmationModal: ConfirmationModalV1,
+    confirmationModalProps: confirmationModalV1Props,
+    openConfirmationModal: confirmUsingV1,
+  } = useConfirm();
+  const {
+    ConfirmationModal: ConfirmationModalV2,
+    confirmationModalProps: confirmationModalV2Props,
+    openConfirmationModal: confirmUsingV2,
+  } = useConfirm();
 
   const changeVersion = async tabIndex => {
     const newVersion = tabIndex + 1;
@@ -100,8 +108,8 @@ const ObjectsApiOptionsFormFields = ({name, apiGroupChoices}) => {
           <V2ConfigFields apiGroupChoices={apiGroupChoices} />
         </TabPanel>
       </Tabs>
-      <ConfirmationModalV1 />
-      <ConfirmationModalV2 />
+      <ConfirmationModalV1 {...confirmationModalV1Props} message={v1SwitchMessage} />
+      <ConfirmationModalV2 {...confirmationModalV2Props} message={v2SwitchMessage} />
     </ValidationErrorsProvider>
   );
 };
diff --git a/src/openforms/js/components/admin/form_design/registrations/objectsapi/V2ConfigFields.js b/src/openforms/js/components/admin/form_design/registrations/objectsapi/V2ConfigFields.js
index 4ee603cdc5..c2a8ad52ba 100644
--- a/src/openforms/js/components/admin/form_design/registrations/objectsapi/V2ConfigFields.js
+++ b/src/openforms/js/components/admin/form_design/registrations/objectsapi/V2ConfigFields.js
@@ -1,6 +1,6 @@
 import {useFormikContext} from 'formik';
 import PropTypes from 'prop-types';
-import {FormattedMessage, useIntl} from 'react-intl';
+import {FormattedMessage} from 'react-intl';
 
 import useConfirm from 'components/admin/form_design/useConfirm';
 import Fieldset from 'components/admin/forms/Fieldset';
@@ -30,27 +30,21 @@ const onApiGroupChange = prevValues => ({
 });
 
 const V2ConfigFields = ({apiGroupChoices}) => {
-  const intl = useIntl();
   const {
     values: {variablesMapping = []},
     setFieldValue,
   } = useFormikContext();
 
-  const [ApiGroupConfirmationModal, confirmApiGroupChange] = useConfirm(
-    intl.formatMessage({
-      description: 'Objects API registration options: warning message when changing the api group',
-      defaultMessage: `Changing the api group will remove the existing variables mapping.
-                Are you sure you want to continue?`,
-    })
-  );
-  const [ObjectTypeConfirmationModal, confirmObjectTypeChange] = useConfirm(
-    intl.formatMessage({
-      description:
-        'Objects API registration options: warning message when changing the object type',
-      defaultMessage: `Changing the objecttype will remove the existing variables mapping.
-                  Are you sure you want to continue?`,
-    })
-  );
+  const {
+    ConfirmationModal: ApiGroupConfirmationModal,
+    confirmationModalProps: apiGroupConfirmationModalProps,
+    openConfirmationModal: openApiGroupConfirmation,
+  } = useConfirm();
+  const {
+    ConfirmationModal: ObjectTypeConfirmationModal,
+    confirmationModalProps: objectTypeConfirmationModalProps,
+    openConfirmationModal: openObjectTypeConfirmation,
+  } = useConfirm();
 
   return (
     <>
@@ -59,7 +53,7 @@ const V2ConfigFields = ({apiGroupChoices}) => {
           apiGroupChoices={apiGroupChoices}
           onChangeCheck={async () => {
             if (variablesMapping.length === 0) return true;
-            const confirmSwitch = await confirmApiGroupChange();
+            const confirmSwitch = await openApiGroupConfirmation();
             if (!confirmSwitch) return false;
             setFieldValue('variablesMapping', []);
             return true;
@@ -77,7 +71,7 @@ const V2ConfigFields = ({apiGroupChoices}) => {
           <ObjectTypeSelect
             onChangeCheck={async () => {
               if (variablesMapping.length === 0) return true;
-              const confirmSwitch = await confirmObjectTypeChange();
+              const confirmSwitch = await openObjectTypeConfirmation();
               if (!confirmSwitch) return false;
               setFieldValue('variablesMapping', []);
               return true;
@@ -125,8 +119,26 @@ const V2ConfigFields = ({apiGroupChoices}) => {
         <OrganisationRSIN />
       </Fieldset>
 
-      <ApiGroupConfirmationModal />
-      <ObjectTypeConfirmationModal />
+      <ApiGroupConfirmationModal
+        {...apiGroupConfirmationModalProps}
+        message={
+          <FormattedMessage
+            description="Objects API registration options: warning message when changing the api group"
+            defaultMessage="Changing the api group will remove the existing variables mapping.
+                Are you sure you want to continue?"
+          />
+        }
+      />
+      <ObjectTypeConfirmationModal
+        {...objectTypeConfirmationModalProps}
+        message={
+          <FormattedMessage
+            description="Objects API registration options: warning message when changing the object type"
+            defaultMessage="Changing the objecttype will remove the existing variables mapping.
+                  Are you sure you want to continue?"
+          />
+        }
+      />
     </>
   );
 };
diff --git a/src/openforms/js/components/admin/form_design/registrations/zgw/BasicOptionsFieldset.js b/src/openforms/js/components/admin/form_design/registrations/zgw/BasicOptionsFieldset.js
index bc576b08cb..65ef454611 100644
--- a/src/openforms/js/components/admin/form_design/registrations/zgw/BasicOptionsFieldset.js
+++ b/src/openforms/js/components/admin/form_design/registrations/zgw/BasicOptionsFieldset.js
@@ -1,6 +1,6 @@
 import {useFormikContext} from 'formik';
 import PropTypes from 'prop-types';
-import {FormattedMessage, useIntl} from 'react-intl';
+import {FormattedMessage} from 'react-intl';
 import {useAsync} from 'react-use';
 
 import useConfirm from 'components/admin/form_design/useConfirm';
@@ -26,7 +26,6 @@ const getCatalogues = async apiGroupID => {
 // Components
 
 const BasicOptionsFieldset = ({apiGroupChoices}) => {
-  const intl = useIntl();
   const {
     values: {
       zaaktype,
@@ -48,13 +47,7 @@ const BasicOptionsFieldset = ({apiGroupChoices}) => {
       objecttypeVersion,
       contentJson,
     ].some(v => !!v) || propertyMappings.length > 0;
-  const [ConfirmationModal, confirm] = useConfirm(
-    intl.formatMessage({
-      description: 'ZGW APIs registration options: warning message when changing the api group',
-      defaultMessage: `Changing the api group will clear the existing configuration.
-              Are you sure you want to continue?`,
-    })
-  );
+  const {ConfirmationModal, confirmationModalProps, openConfirmationModal} = useConfirm();
 
   return (
     <Fieldset>
@@ -62,7 +55,7 @@ const BasicOptionsFieldset = ({apiGroupChoices}) => {
         apiGroupChoices={apiGroupChoices}
         onChangeCheck={async () => {
           if (!hasAnyFieldConfigured) return true;
-          return confirm();
+          return openConfirmationModal();
         }}
       />
 
@@ -78,7 +71,16 @@ const BasicOptionsFieldset = ({apiGroupChoices}) => {
       >
         <CatalogiApiFields />
       </ErrorBoundary>
-      <ConfirmationModal />
+      <ConfirmationModal
+        {...confirmationModalProps}
+        message={
+          <FormattedMessage
+            description="ZGW APIs registration options: warning message when changing the api group"
+            defaultMessage="Changing the api group will clear the existing configuration.
+              Are you sure you want to continue?"
+          />
+        }
+      />
     </Fieldset>
   );
 };
diff --git a/src/openforms/js/components/admin/form_design/useConfirm.js b/src/openforms/js/components/admin/form_design/useConfirm.js
index 5ab498109c..12f873dd42 100644
--- a/src/openforms/js/components/admin/form_design/useConfirm.js
+++ b/src/openforms/js/components/admin/form_design/useConfirm.js
@@ -1,13 +1,14 @@
+import PropTypes from 'prop-types';
 import {useState} from 'react';
 import {useIntl} from 'react-intl';
 
 import ActionButton from 'components/admin/forms/ActionButton';
 import {Modal} from 'components/admin/modals';
 
-const useConfirm = (message, title = '') => {
+const useConfirm = () => {
   const [promise, setPromise] = useState(null);
 
-  const confirm = () =>
+  const openConfirmationModal = () =>
     new Promise(resolve => {
       setPromise({resolve});
     });
@@ -26,32 +27,42 @@ const useConfirm = (message, title = '') => {
     handleClose();
   };
 
-  const ConfirmationModal = () => {
-    const intl = useIntl();
-    const confirmBtnText = intl.formatMessage({
-      description: 'Confirmation modal confirm button',
-      defaultMessage: 'Confirm',
-    });
-    const cancelBtnText = intl.formatMessage({
-      description: 'Confirmation modal cancel button',
-      defaultMessage: 'Cancel',
-    });
-    return (
-      <Modal
-        title={title}
-        isOpen={promise !== null}
-        contentModifiers={['confirmation']}
-        closeModal={handleCancel}
-      >
-        <p>{message}</p>
-        <div className="react-modal__actions">
-          <ActionButton text={confirmBtnText} className="default" onClick={handleConfirm} />
-          <ActionButton text={cancelBtnText} onClick={handleCancel} />
-        </div>
-      </Modal>
-    );
+  const confirmationModalProps = {
+    isOpen: promise !== null,
+    onConfirm: handleConfirm,
+    onCancel: handleCancel,
   };
-  return [ConfirmationModal, confirm];
+
+  return {ConfirmationModal, confirmationModalProps, openConfirmationModal};
+};
+
+const ConfirmationModal = ({title, message, isOpen, onConfirm, onCancel}) => {
+  const intl = useIntl();
+  const confirmBtnText = intl.formatMessage({
+    description: 'Confirmation modal confirm button',
+    defaultMessage: 'Confirm',
+  });
+  const cancelBtnText = intl.formatMessage({
+    description: 'Confirmation modal cancel button',
+    defaultMessage: 'Cancel',
+  });
+  return (
+    <Modal title={title} isOpen={isOpen} contentModifiers={['confirmation']} closeModal={onCancel}>
+      <p>{message}</p>
+      <div className="react-modal__actions">
+        <ActionButton text={confirmBtnText} className="default" onClick={onConfirm} />
+        <ActionButton text={cancelBtnText} onClick={onCancel} />
+      </div>
+    </Modal>
+  );
+};
+
+ConfirmationModal.propTypes = {
+  title: PropTypes.node,
+  message: PropTypes.node.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
 };
 
 export default useConfirm;
diff --git a/src/openforms/js/components/admin/form_design/useConfirm.stories.js b/src/openforms/js/components/admin/form_design/useConfirm.stories.js
index ae506a3afe..e70ccf244f 100644
--- a/src/openforms/js/components/admin/form_design/useConfirm.stories.js
+++ b/src/openforms/js/components/admin/form_design/useConfirm.stories.js
@@ -6,24 +6,25 @@ import ActionButton from 'components/admin/forms/ActionButton';
 import useConfirm from './useConfirm';
 
 const ButtonWithUseConfirm = () => {
-  const [ConfirmationModal, confirm] = useConfirm(
-    'A sample confirmation message',
-    'The confirmation title'
-  );
+  const {ConfirmationModal, confirmationModalProps, openConfirmationModal} = useConfirm();
   const [confirmationResult, setConfirmationResult] = useState(null);
   return (
     <div>
       <ActionButton
         text="Open confirmation modal"
         onClick={async () => {
-          const result = await confirm();
+          const result = await openConfirmationModal();
           setConfirmationResult(result);
         }}
       />
       {confirmationResult !== null ? (
         <p>Confirmation result: {confirmationResult.toString()}</p>
       ) : null}
-      <ConfirmationModal />
+      <ConfirmationModal
+        {...confirmationModalProps}
+        title="The confirmation title"
+        message="A sample confirmation message"
+      />
     </div>
   );
 };
diff --git a/src/openforms/js/components/admin/form_design/variables/prefill/ObjectsAPIFields.js b/src/openforms/js/components/admin/form_design/variables/prefill/ObjectsAPIFields.js
index 9a88c2b6f3..269ae7f441 100644
--- a/src/openforms/js/components/admin/form_design/variables/prefill/ObjectsAPIFields.js
+++ b/src/openforms/js/components/admin/form_design/variables/prefill/ObjectsAPIFields.js
@@ -63,21 +63,16 @@ const ObjectsAPIFields = ({errors}) => {
   } = useFormikContext();
   const intl = useIntl();
 
-  const [ApiGroupConfirmationModal, confirmApiGroupChange] = useConfirm(
-    intl.formatMessage({
-      description: 'Objects API registration options: warning message when changing the api group',
-      defaultMessage: `Changing the api group will remove the existing variables mapping.
-                Are you sure you want to continue?`,
-    })
-  );
-  const [ObjectTypeConfirmationModal, confirmObjectTypeChange] = useConfirm(
-    intl.formatMessage({
-      description:
-        'Objects API registration options: warning message when changing the object type',
-      defaultMessage: `Changing the objecttype will remove the existing variables mapping.
-                  Are you sure you want to continue?`,
-    })
-  );
+  const {
+    ConfirmationModal: ApiGroupConfirmationModal,
+    confirmationModalProps: apiGroupConfirmationModalProps,
+    openConfirmationModal: openApiGroupConfirmationModal,
+  } = useConfirm();
+  const {
+    ConfirmationModal: ObjectTypeConfirmationModal,
+    confirmationModalProps: objectTypeConfirmationModalProps,
+    openConfirmationModal: openObjectTypeConfirmationModal,
+  } = useConfirm();
 
   const {
     plugins: {availablePrefillPlugins},
@@ -110,7 +105,7 @@ const ObjectsAPIFields = ({errors}) => {
           apiGroupChoices={apiGroups}
           onChangeCheck={async () => {
             if (values.options.variablesMapping.length === 0) return true;
-            const confirmSwitch = await confirmApiGroupChange();
+            const confirmSwitch = await openApiGroupConfirmationModal();
             if (!confirmSwitch) return false;
             setFieldValue('options.variablesMapping', []);
             return true;
@@ -133,7 +128,7 @@ const ObjectsAPIFields = ({errors}) => {
             versionFieldName="options.objecttypeVersion"
             onChangeCheck={async () => {
               if (values.options.variablesMapping.length === 0) return true;
-              const confirmSwitch = await confirmObjectTypeChange();
+              const confirmSwitch = await openObjectTypeConfirmationModal();
               if (!confirmSwitch) return false;
               setFieldValue('options.variablesMapping', []);
               return true;
@@ -187,8 +182,24 @@ const ObjectsAPIFields = ({errors}) => {
         </FormRow>
       </Fieldset>
 
-      <ApiGroupConfirmationModal />
-      <ObjectTypeConfirmationModal />
+      <ApiGroupConfirmationModal
+        {...apiGroupConfirmationModalProps}
+        message={
+          <FormattedMessage
+            description="Objects API registration options: warning message when changing the api group"
+            defaultMessage="Changing the api group will remove the existing variables mapping. Are you sure you want to continue?"
+          />
+        }
+      />
+      <ObjectTypeConfirmationModal
+        {...objectTypeConfirmationModalProps}
+        message={
+          <FormattedMessage
+            description="Objects API registration options: warning message when changing the object type"
+            defaultMessage="Changing the objecttype will remove the existing variables mapping. Are you sure you want to continue?"
+          />
+        }
+      />
     </>
   );
 };
diff --git a/src/openforms/js/components/admin/icons/DeleteIcon.js b/src/openforms/js/components/admin/icons/DeleteIcon.js
index b7d19bcfc5..e0d5c1d9dd 100644
--- a/src/openforms/js/components/admin/icons/DeleteIcon.js
+++ b/src/openforms/js/components/admin/icons/DeleteIcon.js
@@ -19,9 +19,9 @@ const DeleteIcon = ({onConfirm, message, icon = 'trash-can'}) => {
     defaultMessage: 'Delete',
   });
 
-  const [ConfirmationModal, confirm] = useConfirm(confirmMessage);
+  const {ConfirmationModal, confirmationModalProps, openConfirmationModal} = useConfirm();
   const onClick = async () => {
-    if (await confirm()) {
+    if (await openConfirmationModal()) {
       onConfirm();
     }
   };
@@ -34,7 +34,7 @@ const DeleteIcon = ({onConfirm, message, icon = 'trash-can'}) => {
         title={iconTitle}
         onClick={onClick}
       />
-      <ConfirmationModal />
+      <ConfirmationModal {...confirmationModalProps} message={confirmMessage} />
     </>
   );
 };