diff --git a/client/components/admin/settings/GroupState.js b/client/components/admin/settings/GroupState.js
index 23f3c202770..8a8baa74a71 100644
--- a/client/components/admin/settings/GroupState.js
+++ b/client/components/admin/settings/GroupState.js
@@ -1,6 +1,6 @@
 import { Meteor } from 'meteor/meteor';
 import { TAPi18n } from 'meteor/rocketchat:tap-i18n';
-import React, { createContext, useCallback, useContext, useMemo, useRef } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import toastr from 'toastr';
 
 import { handleError } from '../../../../app/utils/client/lib/handleError';
@@ -26,9 +26,11 @@ export function GroupState({ groupId }) {
 	const persistedStateRef = useRef();
 	const hydrateRef = useRef();
 
-	settingsRef.current = settings;
-	persistedStateRef.current = persistedState;
-	hydrateRef.current = hydrate;
+	useEffect(() => {
+		settingsRef.current = settings;
+		persistedStateRef.current = persistedState;
+		hydrateRef.current = hydrate;
+	});
 
 	const save = useCallback(async () => {
 		const { current: settings } = settingsRef;
diff --git a/client/components/admin/settings/SectionState.js b/client/components/admin/settings/SectionState.js
index 2b8d812fcc7..cca1756570d 100644
--- a/client/components/admin/settings/SectionState.js
+++ b/client/components/admin/settings/SectionState.js
@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, useContext, useMemo, useRef } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 
 import { useSettingsState } from './SettingsState';
 import { useGroup } from './GroupState';
@@ -20,8 +20,10 @@ export function SectionState({ children, section: name }) {
 	const settingsRef = useRef();
 	const persistedStateRef = useRef();
 
-	settingsRef.current = settings;
-	persistedStateRef.current = persistedState;
+	useEffect(() => {
+		settingsRef.current = settings;
+		persistedStateRef.current = persistedState;
+	});
 
 	const reset = useCallback(() => {
 		const { current: settings } = settingsRef;
diff --git a/client/components/admin/settings/SettingsState.js b/client/components/admin/settings/SettingsState.js
index fb7754b9452..30bfdfaa8e8 100644
--- a/client/components/admin/settings/SettingsState.js
+++ b/client/components/admin/settings/SettingsState.js
@@ -127,9 +127,11 @@ export function SettingsState({ children }) {
 	const updateAtCollectionRef = useRef();
 	const updateStateRef = useRef();
 
-	collectionRef.current = collection;
-	updateAtCollectionRef.current = updateAtCollection;
-	updateStateRef.current = updateState;
+	useEffect(() => {
+		collectionRef.current = collection;
+		updateAtCollectionRef.current = updateAtCollection;
+		updateStateRef.current = updateState;
+	});
 
 	const hydrate = useCallback((changes) => {
 		const { current: updateAtCollection } = updateAtCollectionRef;