diff --git a/src/editor/interaction-library/configure-modal.js b/src/editor/interaction-library/configure-modal.js
index 59bf2a7..e201bcc 100644
--- a/src/editor/interaction-library/configure-modal.js
+++ b/src/editor/interaction-library/configure-modal.js
@@ -125,16 +125,19 @@ export const ConfigureModal = props => {
 
 			// Save through the editor if it's the last interaction
 			if ( index === array.length - 1 ) {
-				// Create the new interaction
-				window.dispatchEvent( new window.CustomEvent( 'interact/add-interaction', {
-					detail: {
-						type: interaction?.type ?? '',
-						target: interaction.target,
-						props: interaction,
-					},
-				} ) )
+				// Close the modal and open the interactions sidebar
+				// before dispatching the event to add the interaction.
+				closeModal()
+				openInteractionsSidebar()
 
 				setTimeout( () => {
+					window.dispatchEvent( new window.CustomEvent( 'interact/add-interaction', {
+						detail: {
+							type: interaction?.type ?? '',
+							target: interaction.target,
+							props: interaction,
+						},
+					} ) )
 					window?.dispatchEvent( new CustomEvent( 'interact/save-interaction' ) )
 					dispatch( 'core/editor' ).savePost()
 				}, 100 )
@@ -147,10 +150,6 @@ export const ConfigureModal = props => {
 				updateInteraction( newInteraction )
 			}
 		} )
-
-		// Close the modal, and open the sidebar for the new interaction.
-		closeModal()
-		openInteractionsSidebar()
 	}
 
 	// If skipConfig is true, just apply the interaction user without configuration.