diff --git a/.changeset/big-beds-bathe.md b/.changeset/big-beds-bathe.md
new file mode 100644
index 00000000000..93157702d09
--- /dev/null
+++ b/.changeset/big-beds-bathe.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+The legacy multiselect are not longer present within the codebase. this means you should use the ones from new macaw when developing the UI
diff --git a/playwright/pages/pageElements/rightSideDetailsSection.ts b/playwright/pages/pageElements/rightSideDetailsSection.ts
index f4d15f821de..660235d5f0b 100644
--- a/playwright/pages/pageElements/rightSideDetailsSection.ts
+++ b/playwright/pages/pageElements/rightSideDetailsSection.ts
@@ -22,9 +22,7 @@ export class RightSideDetailsPage extends BasePage {
       "[data-test-id*='select-option']",
     ),
     readonly taxSelectOption = page.locator("[data-test-id*='select-option']"),
-    readonly selectOption = page.getByTestId(
-      "multi-autocomplete-select-option",
-    ),
+    readonly selectOption = page.getByTestId("select-option"),
     readonly categoryInput = page.getByTestId("category"),
     readonly taxInput = page.getByTestId("taxes"),
     readonly categoryItem = page.getByTestId(
@@ -98,11 +96,11 @@ export class RightSideDetailsPage extends BasePage {
   }
   async expectOptionsSelected(section: Locator, names: string[]) {
     for (const name of names) {
-      await expect(section.getByText(name)).toBeVisible({timeout: 30000});
+      await expect(section.getByText(name)).toBeVisible({ timeout: 30000 });
     }
   }
   async typeAndSelectSingleWarehouseShippingPage(warehouse = "Europe") {
-    await this.selectWarehouseShippingMethodButton.locator("input").fill(warehouse);
+    await this.selectWarehouseShippingMethodButton.fill(warehouse);
 
     await this.selectOption.filter({ hasText: warehouse }).first().click();
     // below click hides prompted options
@@ -110,7 +108,7 @@ export class RightSideDetailsPage extends BasePage {
   }
   async typeAndSelectMultipleWarehousesShippingPage(warehouses: string[]) {
     for (const warehouse of warehouses) {
-      await this.selectWarehouseShippingMethodButton.locator("input").fill(warehouse);
+      await this.selectWarehouseShippingMethodButton.fill(warehouse);
 
       await this.selectOption.filter({ hasText: warehouse }).first().click();
     }
diff --git a/playwright/pages/shippingMethodsPage.ts b/playwright/pages/shippingMethodsPage.ts
index 1645e55c18d..703bc5a0e6e 100644
--- a/playwright/pages/shippingMethodsPage.ts
+++ b/playwright/pages/shippingMethodsPage.ts
@@ -76,12 +76,17 @@ export class ShippingMethodsPage extends BasePage {
 
     await console.log(`Navigates to existing shipping method page: ${existingShippingMethodUrl}`);
     await this.page.goto(existingShippingMethodUrl);
-    await this.rightSideDetailsPage.channelSection
-      .locator(this.page.getByTestId("selected-options"))
-      .waitFor({
+
+    const channels = await this.rightSideDetailsPage.channelSection
+      .locator('[data-test-id*="selected-option-"]')
+      .all();
+
+    for (const channel of channels) {
+      await channel.waitFor({
         state: "visible",
         timeout: 60000,
       });
+    }
   }
 
   async gotoExistingShippingRate(shippingMethodId: string, shippingRateId: string) {
diff --git a/playwright/pages/staffMembersPage.ts b/playwright/pages/staffMembersPage.ts
index 2a6fbc8e7ba..88e3dfa7e93 100644
--- a/playwright/pages/staffMembersPage.ts
+++ b/playwright/pages/staffMembersPage.ts
@@ -20,9 +20,9 @@ export class StaffMembersPage extends BasePage {
     readonly lastName = page.getByTestId("staffLastName"),
     readonly email = page.getByTestId("staffEmail"),
     readonly permissionsGroupSelectButton = page.getByTestId("permission-groups"),
-    readonly permissionGroupOptions = page.getByTestId("multi-autocomplete-select-option"),
-    readonly assignedPermissionGroups = page.getByTestId("assigned-permission-group"),
+    readonly permissionGroupOptions = page.getByTestId("select-option"),
     readonly isActiveCheckbox = page.getByTestId("is-active-checkbox").locator("input"),
+    readonly selectedPermissions = page.locator("[data-test-id*='selected-option']"),
   ) {
     super(page);
     this.request = request;
@@ -60,7 +60,7 @@ export class StaffMembersPage extends BasePage {
   }
 
   async verifyAssignedPermission(permission: string) {
-    await expect(this.assignedPermissionGroups.filter({ hasText: permission })).toBeVisible();
+    await expect(this.selectedPermissions.filter({ hasText: permission })).toBeVisible();
   }
 
   async updateStaffInfo(name: string, lastName: string, email: string) {
diff --git a/playwright/pages/variantsPage.ts b/playwright/pages/variantsPage.ts
index 75f67d8c2cd..c6c1ed4ffba 100644
--- a/playwright/pages/variantsPage.ts
+++ b/playwright/pages/variantsPage.ts
@@ -36,9 +36,7 @@ export class VariantsPage {
     readonly booleanAttributeCheckbox = page.locator(
       "[name*='attribute'][type='checkbox']",
     ),
-    readonly selectOption = page.getByTestId(
-      "multi-autocomplete-select-option",
-    ),
+    readonly selectOption = page.getByTestId("select-option"),
     readonly manageChannels = page.getByTestId("manage-channels-button"),
     readonly allChannels = page.locator("[name='allChannels']"),
   ) {
diff --git a/src/components/AccountPermissionGroups/AccountPermissionGroups.tsx b/src/components/AccountPermissionGroups/AccountPermissionGroups.tsx
index ca279031618..d58a0555242 100644
--- a/src/components/AccountPermissionGroups/AccountPermissionGroups.tsx
+++ b/src/components/AccountPermissionGroups/AccountPermissionGroups.tsx
@@ -8,24 +8,22 @@ import { FetchMoreProps, RelayToFlat, SearchPageProps } from "@dashboard/types";
 import { getFormErrors } from "@dashboard/utils/errors";
 import getStaffErrorMessage from "@dashboard/utils/errors/staff";
 import { Typography } from "@material-ui/core";
+import { Option } from "@saleor/macaw-ui-next";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import MultiAutocompleteSelectField, {
-  MultiAutocompleteChoiceType,
-} from "../MultiAutocompleteSelectField";
+import { Multiselect } from "../Combobox";
 
 export interface AccountPermissionGroupsProps
   extends FetchMoreProps,
     SearchPageProps {
   formData: {
-    permissionGroups: string[];
+    permissionGroups: Option[];
   };
   disabled: boolean;
   errors: StaffErrorFragment[];
   availablePermissionGroups: RelayToFlat<SearchPermissionGroupsQuery["search"]>;
   onChange: FormChange;
-  displayValues: MultiAutocompleteChoiceType[];
 }
 
 const AccountPermissionGroups: React.FC<
@@ -34,7 +32,6 @@ const AccountPermissionGroups: React.FC<
   const {
     availablePermissionGroups,
     disabled,
-    displayValues,
     errors,
     formData,
     hasMore,
@@ -54,21 +51,24 @@ const AccountPermissionGroups: React.FC<
   const formErrors = getFormErrors(["addGroups", "removeGroups"], errors);
   return (
     <>
-      <MultiAutocompleteSelectField
-        displayValues={displayValues}
+      <Multiselect
         label={intl.formatMessage({
           id: "C7eDb9",
           defaultMessage: "Permission groups",
         })}
-        choices={disabled ? [] : choices}
         name="permissionGroups"
+        options={disabled ? [] : choices}
         value={formData?.permissionGroups}
         onChange={onChange}
-        fetchChoices={onSearchChange}
+        fetchOptions={onSearchChange}
+        fetchMore={{
+          onFetchMore,
+          hasMore,
+          loading,
+        }}
         data-test-id="permission-groups"
-        onFetchMore={onFetchMore}
-        hasMore={hasMore}
-        loading={loading}
+        error={!!formErrors.addGroups}
+        helperText={getStaffErrorMessage(formErrors.addGroups, intl)}
       />
       {!!formErrors.addGroups && (
         <Typography color="error">
diff --git a/src/components/Combobox/components/Multiselect.tsx b/src/components/Combobox/components/Multiselect.tsx
index 19da4895b59..8c6ee0345b7 100644
--- a/src/components/Combobox/components/Multiselect.tsx
+++ b/src/components/Combobox/components/Multiselect.tsx
@@ -33,7 +33,7 @@ const MultiselectRoot = forwardRef<HTMLInputElement, MultiselectProps>(
   (
     {
       disabled,
-      options,
+      options = [],
       onChange,
       fetchOptions,
       value,
diff --git a/src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx b/src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx
index ef941675635..3a46ff25c73 100644
--- a/src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx
+++ b/src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx
@@ -6,9 +6,7 @@ import CountryList from "@dashboard/components/CountryList";
 import Form from "@dashboard/components/Form";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import { Metadata } from "@dashboard/components/Metadata/Metadata";
-import { MultiAutocompleteChoiceType } from "@dashboard/components/MultiAutocompleteSelectField";
-import Savebar from "@dashboard/components/Savebar";
-import { SingleAutocompleteChoiceType } from "@dashboard/components/SingleAutocompleteSelectField";
+import { Savebar } from "@dashboard/components/Savebar";
 import {
   ChannelFragment,
   ShippingErrorFragment,
@@ -18,11 +16,9 @@ import {
 } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import useNavigator from "@dashboard/hooks/useNavigator";
-import useStateFromProps from "@dashboard/hooks/useStateFromProps";
 import { shippingZonesListUrl } from "@dashboard/shipping/urls";
-import createMultiAutocompleteSelectHandler from "@dashboard/utils/handlers/multiAutocompleteSelectChangeHandler";
-import { mapNodeToChoice } from "@dashboard/utils/maps";
 import useMetadataChangeTrigger from "@dashboard/utils/metadata/useMetadataChangeTrigger";
+import { Option } from "@saleor/macaw-ui-next";
 import React from "react";
 import { defineMessages, useIntl } from "react-intl";
 
@@ -74,9 +70,7 @@ export interface ShippingZoneDetailsPageProps
   allChannels?: ChannelFragment[];
 }
 
-function warehouseToChoice(
-  warehouse: Record<"id" | "name", string>,
-): SingleAutocompleteChoiceType {
+function warehouseToChoice(warehouse: Record<"id" | "name", string>): Option {
   return {
     label: warehouse.name,
     value: warehouse.id,
@@ -110,19 +104,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
   const navigate = useNavigator();
 
   const initialForm = getInitialFormData(shippingZone);
-
-  const [warehouseDisplayValues, setWarehouseDisplayValues] = useStateFromProps<
-    MultiAutocompleteChoiceType[]
-  >(mapNodeToChoice(shippingZone?.warehouses));
-
   const warehouseChoices = warehouses.map(warehouseToChoice);
-
-  const channelChoices = mapNodeToChoice(allChannels);
-
-  const [channelsDisplayValues, setChannelDisplayValues] = useStateFromProps<
-    MultiAutocompleteChoiceType[]
-  >(mapNodeToChoice(shippingZone?.channels));
-
   const { makeChangeHandler: makeMetadataChangeHandler } =
     useMetadataChangeTrigger();
 
@@ -133,21 +115,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
       confirmLeave
       disabled={disabled}
     >
-      {({ change, data, isSaveDisabled, submit, toggleValue }) => {
-        const handleWarehouseChange = createMultiAutocompleteSelectHandler(
-          toggleValue,
-          setWarehouseDisplayValues,
-          warehouseDisplayValues,
-          warehouseChoices,
-        );
-
-        const handleChannelChange = createMultiAutocompleteSelectHandler(
-          toggleValue,
-          setChannelDisplayValues,
-          channelsDisplayValues,
-          channelChoices,
-        );
-
+      {({ change, data, isSaveDisabled, submit }) => {
         const changeMetadata = makeMetadataChangeHandler(change);
 
         return (
@@ -204,17 +172,15 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
             <DetailPageLayout.RightSidebar>
               <ShippingZoneSettingsCard
                 formData={data}
-                warehousesDisplayValues={warehouseDisplayValues}
                 hasMoreWarehouses={hasMore}
                 loading={loading}
-                onWarehouseChange={handleWarehouseChange}
+                onWarehouseChange={change}
                 onFetchMoreWarehouses={onFetchMore}
                 onWarehousesSearchChange={onSearchChange}
                 onWarehouseAdd={onWarehouseAdd}
                 warehousesChoices={warehouseChoices}
                 allChannels={allChannels}
-                channelsDisplayValues={channelsDisplayValues}
-                onChannelChange={handleChannelChange}
+                onChannelChange={change}
               />
             </DetailPageLayout.RightSidebar>
             <Savebar
diff --git a/src/shipping/components/ShippingZoneDetailsPage/types.ts b/src/shipping/components/ShippingZoneDetailsPage/types.ts
index c45910246ea..5b559e989cf 100644
--- a/src/shipping/components/ShippingZoneDetailsPage/types.ts
+++ b/src/shipping/components/ShippingZoneDetailsPage/types.ts
@@ -1,8 +1,9 @@
 import { MetadataFormData } from "@dashboard/components/Metadata";
+import { Option } from "@saleor/macaw-ui-next";
 
 export interface ShippingZoneUpdateFormData extends MetadataFormData {
   name: string;
   description: string;
-  warehouses: string[];
-  channels: string[];
+  warehouses: Option[];
+  channels: Option[];
 }
diff --git a/src/shipping/components/ShippingZoneDetailsPage/utils.ts b/src/shipping/components/ShippingZoneDetailsPage/utils.ts
index 0c2950ee4b9..8f6764d3b46 100644
--- a/src/shipping/components/ShippingZoneDetailsPage/utils.ts
+++ b/src/shipping/components/ShippingZoneDetailsPage/utils.ts
@@ -11,6 +11,14 @@ export const getInitialFormData = (
   metadata: shippingZone?.metadata.map(mapMetadataItemToInput),
   name: shippingZone?.name || "",
   privateMetadata: shippingZone?.privateMetadata.map(mapMetadataItemToInput),
-  warehouses: shippingZone?.warehouses?.map(warehouse => warehouse.id) || [],
-  channels: shippingZone?.channels.map(({ id }) => id) || [],
+  warehouses:
+    shippingZone?.warehouses?.map(warehouse => ({
+      label: warehouse.name,
+      value: warehouse.id,
+    })) || [],
+  channels:
+    shippingZone?.channels.map(({ id, name }) => ({
+      label: name,
+      value: id,
+    })) || [],
 });
diff --git a/src/shipping/components/ShippingZoneSettingsCard/ChannelsSection.tsx b/src/shipping/components/ShippingZoneSettingsCard/ChannelsSection.tsx
index 3cbd1ec1356..71c9d759d5c 100644
--- a/src/shipping/components/ShippingZoneSettingsCard/ChannelsSection.tsx
+++ b/src/shipping/components/ShippingZoneSettingsCard/ChannelsSection.tsx
@@ -1,11 +1,10 @@
 import CardSpacer from "@dashboard/components/CardSpacer";
-import MultiAutocompleteSelectField, {
-  MultiAutocompleteChoiceType,
-} from "@dashboard/components/MultiAutocompleteSelectField";
+import { Multiselect } from "@dashboard/components/Combobox";
 import { ChannelFragment } from "@dashboard/graphql";
 import { useChannelsSearch } from "@dashboard/hooks/useChannelsSearch";
 import { FormChange } from "@dashboard/hooks/useForm";
 import { mapNodeToChoice } from "@dashboard/utils/maps";
+import { Option } from "@saleor/macaw-ui-next";
 import React from "react";
 import { defineMessages, FormattedMessage, useIntl } from "react-intl";
 
@@ -30,16 +29,14 @@ const messages = defineMessages({
 
 interface ChannelsSectionProps {
   onChange: FormChange;
-  selectedChannels: string[];
+  selectedChannels: Option[];
   allChannels?: ChannelFragment[];
-  channelsDisplayValues: MultiAutocompleteChoiceType[];
 }
 
 const ChannelsSection: React.FC<ChannelsSectionProps> = ({
   onChange,
   allChannels = [],
   selectedChannels,
-  channelsDisplayValues,
 }) => {
   const { onQueryChange, filteredChannels } = useChannelsSearch(allChannels);
 
@@ -49,18 +46,14 @@ const ChannelsSection: React.FC<ChannelsSectionProps> = ({
     <>
       <FormattedMessage {...messages.subtitle} />
       <CardSpacer />
-      <MultiAutocompleteSelectField
-        choices={mapNodeToChoice(filteredChannels)}
-        displayValues={channelsDisplayValues}
-        fetchChoices={onQueryChange}
-        hasMore={false}
+
+      <Multiselect
         label={intl.formatMessage(messages.selectFieldLabel)}
-        loading={false}
         name="channels"
-        onChange={onChange}
-        placeholder={intl.formatMessage(messages.selectFieldPlaceholder)}
+        options={mapNodeToChoice(filteredChannels)}
         value={selectedChannels}
-        testId="channels"
+        onChange={onChange}
+        fetchOptions={onQueryChange}
         data-test-id="select-channel-for-shipping-method"
       />
     </>
diff --git a/src/shipping/components/ShippingZoneSettingsCard/ShippingZoneSettingsCard.tsx b/src/shipping/components/ShippingZoneSettingsCard/ShippingZoneSettingsCard.tsx
index e8d1eec707d..14332951dde 100644
--- a/src/shipping/components/ShippingZoneSettingsCard/ShippingZoneSettingsCard.tsx
+++ b/src/shipping/components/ShippingZoneSettingsCard/ShippingZoneSettingsCard.tsx
@@ -1,8 +1,8 @@
 import CardTitle from "@dashboard/components/CardTitle";
-import { MultiAutocompleteChoiceType } from "@dashboard/components/MultiAutocompleteSelectField";
 import { ChannelFragment } from "@dashboard/graphql";
 import { FormChange } from "@dashboard/hooks/useForm";
 import { Card, CardContent, Divider } from "@material-ui/core";
+import { Option } from "@saleor/macaw-ui-next";
 import React from "react";
 import { defineMessages, useIntl } from "react-intl";
 
@@ -20,14 +20,12 @@ const messages = defineMessages({
 
 export interface ShippingZoneSettingsCardProps {
   formData: ShippingZoneUpdateFormData;
-  warehousesDisplayValues: MultiAutocompleteChoiceType[];
-  warehousesChoices: MultiAutocompleteChoiceType[];
+  warehousesChoices: Option[];
   onWarehouseAdd: () => void;
   onWarehouseChange: FormChange;
   hasMoreWarehouses: boolean;
   onFetchMoreWarehouses: () => void;
   onWarehousesSearchChange: (query: string) => void;
-  channelsDisplayValues: MultiAutocompleteChoiceType[];
   onChannelChange: FormChange;
   allChannels?: ChannelFragment[];
   loading: boolean;
@@ -37,7 +35,6 @@ export const ShippingZoneSettingsCard: React.FC<
   ShippingZoneSettingsCardProps
 > = ({
   formData,
-  warehousesDisplayValues,
   hasMoreWarehouses,
   loading,
   warehousesChoices,
@@ -47,7 +44,6 @@ export const ShippingZoneSettingsCard: React.FC<
   onWarehouseChange,
   allChannels,
   onChannelChange,
-  channelsDisplayValues,
 }) => {
   const intl = useIntl();
 
@@ -56,7 +52,6 @@ export const ShippingZoneSettingsCard: React.FC<
       <CardTitle title={intl.formatMessage(messages.title)} />
       <CardContent data-test-id="channel-section">
         <ChannelsSection
-          channelsDisplayValues={channelsDisplayValues}
           onChange={onChannelChange}
           allChannels={allChannels}
           selectedChannels={formData.channels}
@@ -69,7 +64,6 @@ export const ShippingZoneSettingsCard: React.FC<
           onSearchChange={onWarehousesSearchChange}
           onChange={onWarehouseChange}
           onFetchMore={onFetchMoreWarehouses}
-          displayValues={warehousesDisplayValues}
           choices={warehousesChoices}
           selectedWarehouses={formData.warehouses}
           hasMore={hasMoreWarehouses}
diff --git a/src/shipping/components/ShippingZoneSettingsCard/WarehousesSection.tsx b/src/shipping/components/ShippingZoneSettingsCard/WarehousesSection.tsx
index 5de45a1e606..5249977230c 100644
--- a/src/shipping/components/ShippingZoneSettingsCard/WarehousesSection.tsx
+++ b/src/shipping/components/ShippingZoneSettingsCard/WarehousesSection.tsx
@@ -1,9 +1,8 @@
 import CardSpacer from "@dashboard/components/CardSpacer";
-import MultiAutocompleteSelectField, {
-  MultiAutocompleteChoiceType,
-} from "@dashboard/components/MultiAutocompleteSelectField";
+import { Multiselect } from "@dashboard/components/Combobox";
 import { FormChange } from "@dashboard/hooks/useForm";
 import { FetchMoreProps, SearchProps } from "@dashboard/types";
+import { Box, Button, Option } from "@saleor/macaw-ui-next";
 import React from "react";
 import { defineMessages, FormattedMessage, useIntl } from "react-intl";
 
@@ -32,11 +31,10 @@ const messages = defineMessages({
 });
 
 interface WarehousesSectionProps extends FetchMoreProps, SearchProps {
-  displayValues: MultiAutocompleteChoiceType[];
-  choices: MultiAutocompleteChoiceType[];
+  choices: Option[];
   onChange: FormChange;
   onAdd: () => void;
-  selectedWarehouses: string[];
+  selectedWarehouses: Option[];
 }
 
 const WarehousesSection: React.FC<WarehousesSectionProps> = ({
@@ -44,7 +42,6 @@ const WarehousesSection: React.FC<WarehousesSectionProps> = ({
   onSearchChange,
   onChange,
   onFetchMore,
-  displayValues,
   choices,
   selectedWarehouses,
   hasMore,
@@ -56,25 +53,27 @@ const WarehousesSection: React.FC<WarehousesSectionProps> = ({
     <>
       <FormattedMessage {...messages.subtitle} />
       <CardSpacer />
-      <MultiAutocompleteSelectField
-        add={{
-          label: intl.formatMessage(messages.selectFieldAddText),
-          onClick: onAdd,
-        }}
-        testId="warehouses"
-        data-test-id="select-warehouse-for-shipping-method"
-        choices={choices}
-        displayValues={displayValues}
-        fetchChoices={onSearchChange}
-        hasMore={hasMore}
+
+      <Multiselect
         label={intl.formatMessage(messages.selectFieldLabel)}
-        loading={loading}
+        data-test-id="select-warehouse-for-shipping-method"
         name="warehouses"
-        onChange={onChange}
-        onFetchMore={onFetchMore}
-        placeholder={intl.formatMessage(messages.selectFieldPlaceholder)}
+        options={choices}
         value={selectedWarehouses}
+        onChange={onChange}
+        fetchOptions={onSearchChange}
+        fetchMore={{
+          onFetchMore,
+          hasMore,
+          loading,
+        }}
       />
+
+      <Box marginTop={4} display="flex" justifyContent="flex-end">
+        <Button variant="secondary" onClick={onAdd}>
+          {intl.formatMessage(messages.selectFieldAddText)}
+        </Button>
+      </Box>
     </>
   );
 };
diff --git a/src/shipping/views/ShippingZoneDetails/index.tsx b/src/shipping/views/ShippingZoneDetails/index.tsx
index 0866fac66fa..9a6878377b7 100644
--- a/src/shipping/views/ShippingZoneDetails/index.tsx
+++ b/src/shipping/views/ShippingZoneDetails/index.tsx
@@ -159,12 +159,12 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
   ): ShippingZoneUpdateInput => {
     const warehouseDiff = diff(
       data.shippingZone.warehouses.map(warehouse => warehouse.id),
-      submitData.warehouses,
+      submitData.warehouses.map(warehouse => warehouse.value),
     );
 
     const channelsDiff = arrayDiff(
       data.shippingZone.channels.map(channel => channel.id),
-      submitData.channels,
+      submitData.channels.map(channel => channel.value),
     );
 
     return {
diff --git a/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx b/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx
index 73947700da8..99c3b87464b 100644
--- a/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx
+++ b/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx
@@ -6,8 +6,7 @@ import CardTitle from "@dashboard/components/CardTitle";
 import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
-import { MultiAutocompleteChoiceType } from "@dashboard/components/MultiAutocompleteSelectField";
-import Savebar from "@dashboard/components/Savebar";
+import { Savebar } from "@dashboard/components/Savebar";
 import {
   SearchPermissionGroupsQuery,
   StaffErrorFragment,
@@ -17,7 +16,6 @@ import {
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import useLocale from "@dashboard/hooks/useLocale";
 import useNavigator from "@dashboard/hooks/useNavigator";
-import useStateFromProps from "@dashboard/hooks/useStateFromProps";
 import { getUserName } from "@dashboard/misc";
 import UserStatus from "@dashboard/staff/components/UserStatus";
 import { staffListUrl } from "@dashboard/staff/urls";
@@ -26,8 +24,8 @@ import {
   isMemberActive,
 } from "@dashboard/staff/utils";
 import { FetchMoreProps, RelayToFlat, SearchPageProps } from "@dashboard/types";
-import createMultiAutocompleteSelectHandler from "@dashboard/utils/handlers/multiAutocompleteSelectChangeHandler";
 import { Card, CardContent, Typography } from "@material-ui/core";
+import { Option } from "@saleor/macaw-ui-next";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -41,7 +39,7 @@ export interface StaffDetailsFormData {
   firstName: string;
   isActive: boolean;
   lastName: string;
-  permissionGroups: string[];
+  permissionGroups: Option[];
 }
 
 export interface StaffDetailsPageProps extends SearchPageProps {
@@ -89,21 +87,15 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
   const isActive = isMemberActive(staffMember);
   const permissionGroups = getMemberPermissionGroups(staffMember);
 
-  const [permissionGroupsDisplayValues, setPermissionGroupsDisplayValues] =
-    useStateFromProps<MultiAutocompleteChoiceType[]>(
-      permissionGroups.map(group => ({
-        disabled: !group.userCanManage,
-        label: group.name,
-        value: group.id,
-      })) || [],
-    );
-
   const initialForm: StaffDetailsFormData = {
     email: staffMember?.email || "",
     firstName: staffMember?.firstName || "",
     isActive,
     lastName: staffMember?.lastName || "",
-    permissionGroups: permissionGroups.map(pg => pg.id),
+    permissionGroups: permissionGroups.map(pg => ({
+      label: pg.name,
+      value: pg.id,
+    })),
   };
 
   return (
@@ -113,17 +105,7 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
       onSubmit={onSubmit}
       disabled={disabled}
     >
-      {({ data: formData, change, isSaveDisabled, submit, toggleValue }) => {
-        const permissionGroupsChange = createMultiAutocompleteSelectHandler(
-          toggleValue,
-          setPermissionGroupsDisplayValues,
-          permissionGroupsDisplayValues,
-          availablePermissionGroups?.map(group => ({
-            label: group.name,
-            value: group.id,
-          })) || [],
-        );
-
+      {({ data: formData, change, isSaveDisabled, submit }) => {
         return (
           <DetailPageLayout>
             <TopNav href={staffListUrl()} title={getUserName(staffMember)} />
@@ -182,9 +164,8 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
                         errors={errors}
                         initialSearch={initialSearch}
                         availablePermissionGroups={availablePermissionGroups}
-                        onChange={permissionGroupsChange}
+                        onChange={change}
                         onSearchChange={onSearchChange}
-                        displayValues={permissionGroupsDisplayValues}
                         {...fetchMorePermissionGroups}
                       />
                     </CardContent>
diff --git a/src/staff/utils.ts b/src/staff/utils.ts
index 0b06ba55ced..4af33c33073 100644
--- a/src/staff/utils.ts
+++ b/src/staff/utils.ts
@@ -15,7 +15,7 @@ export const groupsDiff = (
     return {};
   }
 
-  const newGroups = formData.permissionGroups;
+  const newGroups = formData.permissionGroups.map(u => u.value);
   const oldGroups = user.permissionGroups.map(u => u.id);
 
   return {