diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/modals/user-group-picker/user-group-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/modals/user-group-picker/user-group-picker-modal.element.ts
index 7e7fc07654..f70a5e65a1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/modals/user-group-picker/user-group-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/modals/user-group-picker/user-group-picker-modal.element.ts
@@ -1,14 +1,16 @@
 import { UmbUserGroupCollectionRepository } from '../../collection/repository/index.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { css, html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils';
-import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
+import { UMB_USER_GROUP_PICKER_MODAL, UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
 import { UserGroupResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UUIMenuItemEvent } from '@umbraco-cms/backoffice/external/uui';
 import { UmbSelectedEvent, UmbDeselectedEvent } from '@umbraco-cms/backoffice/event';
-
 @customElement('umb-user-group-picker-modal')
-export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<any, any> {
+export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<
+	(typeof UMB_USER_GROUP_PICKER_MODAL)['DATA'],
+	(typeof UMB_USER_GROUP_PICKER_MODAL)['VALUE']
+> {
 	@state()
 	private _userGroups: Array<UserGroupResponseModel> = [];
 
@@ -20,7 +22,8 @@ export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<any, any
 
 		// TODO: in theory this config could change during the lifetime of the modal, so we could observe it
 		this.#selectionManager.setMultiple(this.data?.multiple ?? false);
-		this.#selectionManager.setSelection(this.data?.selection ?? []);
+		this.#selectionManager.setSelection(this._value?.selection ?? []);
+		this.observe(this.#selectionManager.selection, (selection) => this.updateValue({ selection }), 'selectionObserver');
 	}
 
 	protected firstUpdated(): void {
@@ -37,7 +40,6 @@ export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<any, any
 		if (!item.id) throw new Error('User group id is required');
 		event.stopPropagation();
 		this.#selectionManager.select(item.id);
-		this.#updateSelectionValue();
 		this.requestUpdate();
 		this.modalContext?.dispatchEvent(new UmbSelectedEvent(item.id));
 	}
@@ -46,15 +48,10 @@ export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<any, any
 		if (!item.id) throw new Error('User group id is required');
 		event.stopPropagation();
 		this.#selectionManager.deselect(item.id);
-		this.#updateSelectionValue();
 		this.requestUpdate();
 		this.modalContext?.dispatchEvent(new UmbDeselectedEvent(item.id));
 	}
 
-	#updateSelectionValue() {
-		this.modalContext?.updateValue({ selection: this.#selectionManager.getSelection() });
-	}
-
 	render() {
 		return html`
 			<umb-body-layout headline=${this.localize.term('user_selectUserGroup', false)}>
@@ -80,7 +77,7 @@ export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<any, any
 		`;
 	}
 
-	static styles = [UmbTextStyles, css``];
+	static styles = [UmbTextStyles];
 }
 
 export default UmbUserGroupPickerModalElement;