diff --git a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_button_group.tsx b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_button_group.tsx
index f4be2a0c04358..09a26dd150116 100644
--- a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_button_group.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_button_group.tsx
@@ -38,7 +38,7 @@ type SelectedNavButton = keyof typeof buttonGroupOptions;
 export function ServiceGroupsButtonGroup({
   selectedNavButton,
 }: {
-  selectedNavButton: SelectedNavButton | undefined;
+  selectedNavButton: SelectedNavButton;
 }) {
   const history = useHistory();
   const { tourEnabled, dismissTour } = useServiceGroupsTour('createGroup');
@@ -60,17 +60,11 @@ export function ServiceGroupsButtonGroup({
     >
       <EuiButtonGroup
         color="primary"
-        type="multi"
         options={[
           buttonGroupOptions.allServices.option,
           buttonGroupOptions.serviceGroups.option,
         ]}
-        idToSelectedMap={{
-          allServices:
-            selectedNavButton === buttonGroupOptions.allServices.option.id,
-          serviceGroups:
-            selectedNavButton === buttonGroupOptions.serviceGroups.option.id,
-        }}
+        idSelected={selectedNavButton as string}
         onChange={(id) => {
           const { pathname } = buttonGroupOptions[id as SelectedNavButton];
           history.push({ pathname });