diff --git a/js/apps/admin-ui/src/realm-settings/EmailTab.tsx b/js/apps/admin-ui/src/realm-settings/EmailTab.tsx
index fe7d20a31b..c0eba2e957 100644
--- a/js/apps/admin-ui/src/realm-settings/EmailTab.tsx
+++ b/js/apps/admin-ui/src/realm-settings/EmailTab.tsx
@@ -11,7 +11,6 @@ import {
   PageSection,
   Switch,
 } from "@patternfly/react-core";
-import { useState } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -32,17 +31,18 @@ import "./realm-settings-section.css";
 
 type RealmSettingsEmailTabProps = {
   realm: RealmRepresentation;
+  save: (realm: RealmRepresentation) => void;
 };
 
 export const RealmSettingsEmailTab = ({
-  realm: initialRealm,
+  realm,
+  save,
 }: RealmSettingsEmailTabProps) => {
   const { t } = useTranslation("realm-settings");
   const { realm: realmName } = useRealm();
   const { addAlert, addError } = useAlerts();
   const currentUser = useCurrentUser();
 
-  const [realm, setRealm] = useState(initialRealm);
   const {
     register,
     control,
@@ -64,21 +64,6 @@ export const RealmSettingsEmailTab = ({
     defaultValue: "",
   });
 
-  const save = async (form: RealmRepresentation) => {
-    try {
-      const savedRealm = { ...realm, ...form };
-
-      // For default value, back end is expecting null instead of empty string
-      if (savedRealm.smtpServer?.port === "") savedRealm.smtpServer.port = null;
-
-      await adminClient.realms.update({ realm: realmName }, savedRealm);
-      setRealm(savedRealm);
-      addAlert(t("saveSuccess"), AlertVariant.success);
-    } catch (error) {
-      addError("realm-settings:saveError", error);
-    }
-  };
-
   const testConnection = async () => {
     const toNumber = (value: string) => Number(value);
     const toBoolean = (value: string) => value === true.toString();
diff --git a/js/apps/admin-ui/src/realm-settings/RealmSettingsTabs.tsx b/js/apps/admin-ui/src/realm-settings/RealmSettingsTabs.tsx
index 7412c6fed4..9f31ffd354 100644
--- a/js/apps/admin-ui/src/realm-settings/RealmSettingsTabs.tsx
+++ b/js/apps/admin-ui/src/realm-settings/RealmSettingsTabs.tsx
@@ -199,14 +199,17 @@ export const RealmSettingsTabs = ({
     }
 
     try {
-      await adminClient.realms.update(
-        { realm: realmName },
-        {
-          ...realm,
-          ...r,
-          id: r.realm,
-        }
-      );
+      const savedRealm: RealmRepresentation = {
+        ...realm,
+        ...r,
+        id: r.realm,
+      };
+
+      // For the default value, null is expected instead of an empty string.
+      if (savedRealm.smtpServer?.port === "") {
+        savedRealm.smtpServer = { ...savedRealm.smtpServer, port: null };
+      }
+      await adminClient.realms.update({ realm: realmName }, savedRealm);
       addAlert(t("saveSuccess"), AlertVariant.success);
     } catch (error) {
       addError("realm-settings:saveError", error);
@@ -293,7 +296,7 @@ export const RealmSettingsTabs = ({
             data-testid="rs-email-tab"
             {...emailTab}
           >
-            <RealmSettingsEmailTab realm={realm} />
+            <RealmSettingsEmailTab realm={realm} save={save} />
           </Tab>
           <Tab
             title={<TabTitleText>{t("themes")}</TabTitleText>}