diff --git a/inc/customizer/controls/react/src/common/ColorControl.js b/inc/customizer/controls/react/src/common/ColorControl.js
index 71d0253642..2ecee71ce7 100644
--- a/inc/customizer/controls/react/src/common/ColorControl.js
+++ b/inc/customizer/controls/react/src/common/ColorControl.js
@@ -1,9 +1,12 @@
 import PropTypes from 'prop-types';
 import GlobalColorsPicker from '../common/GlobalColorsPicker';
-import { ColorPicker, Button, Dropdown } from '@wordpress/components';
+// we can add back ColorPicker here when issue https://github.com/WordPress/gutenberg/issues/30798 is resolved
+import { Button, Dropdown } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 
+import ColorPickerFix from './ColorPickerDebug';
+
 const ColorControl = ({
 	label,
 	selectedColor,
@@ -67,7 +70,7 @@ const ColorControl = ({
 					<>
 						{/* eslint-disable-next-line  jsx-a11y/anchor-has-content */}
 						<a href="#color-picker" />
-						<ColorPicker
+						<ColorPickerFix
 							color={selectedColor}
 							onChangeComplete={handleChange}
 						/>
diff --git a/inc/customizer/controls/react/src/global-colors/PaletteColors.js b/inc/customizer/controls/react/src/global-colors/PaletteColors.js
index 043a5d744b..bf264c674e 100644
--- a/inc/customizer/controls/react/src/global-colors/PaletteColors.js
+++ b/inc/customizer/controls/react/src/global-colors/PaletteColors.js
@@ -43,7 +43,7 @@ const PaletteColors = ({ values, defaults, save }) => {
 			<div className="color-array-wrap">
 				{globalPaletteColors.map((group, index) => {
 					return (
-						<Fragment key={index}>
+						<Fragment key={activePalette + '_' + index}>
 							{index > 0 && <hr />}
 							{Object.keys(group).map((slug) => {
 								return (