diff --git a/src/plugins/global-settings/color-schemes/color-scheme-picker.js b/src/plugins/global-settings/color-schemes/color-scheme-picker.js
index 7c5f44cdb..6f5a401ed 100644
--- a/src/plugins/global-settings/color-schemes/color-scheme-picker.js
+++ b/src/plugins/global-settings/color-schemes/color-scheme-picker.js
@@ -236,22 +236,25 @@ const ColorSchemePicker = props => {
 			}
 		}
 
-		const currentItem = cloneDeep( itemInEdit )
+		setItemInEdit( prevItem => {
+			// clone deep causes the color picker to jump when dragging, so we use a spread operator to create a new object
+			const currentItem = { ...prevItem }
 
-		if ( ! schemeHasValue( currentItem.colorScheme ) && changeDefaultName ) {
-			currentItem.name = currentItem?.key === 'scheme-default-1' ? 'Color Scheme 1' : 'Color Scheme 2'
-		}
+			if ( ! schemeHasValue( currentItem.colorScheme ) && changeDefaultName ) {
+				currentItem.name = currentItem?.key === 'scheme-default-1' ? 'Color Scheme 1' : 'Color Scheme 2'
+			}
 
-		currentItem.colorScheme[ property ][ currentState ] = color
+			currentItem.colorScheme[ property ][ currentState ] = color
 
-		if ( property === 'backgroundColor' && isGradient( color ) ) {
-			currentItem.colorScheme[ property ].desktopHover = ''
-			currentItem.colorScheme[ property ].desktopParentHover = ''
-		}
+			if ( property === 'backgroundColor' && isGradient( color ) ) {
+				currentItem.colorScheme[ property ].desktopHover = ''
+				currentItem.colorScheme[ property ].desktopParentHover = ''
+			}
 
-		setItemInEdit( currentItem )
+			updateColorSchemes( currentItem )
 
-		updateColorSchemes( currentItem )
+			return currentItem
+		} )
 	}
 
 	// For updating option to show the color scheme in color pickers