diff --git a/ee/app/assets/javascripts/dependencies/components/filtered_search/group_dependencies_filtered_search.vue b/ee/app/assets/javascripts/dependencies/components/filtered_search/group_dependencies_filtered_search.vue
index 570eee2b45e0f830039ae7e84326ecbce9bced0a..1811ea78110a7b5ff4e83bb12ada3f0022c737e4 100644
--- a/ee/app/assets/javascripts/dependencies/components/filtered_search/group_dependencies_filtered_search.vue
+++ b/ee/app/assets/javascripts/dependencies/components/filtered_search/group_dependencies_filtered_search.vue
@@ -61,7 +61,7 @@ export default {
         ...(this.glFeatures.groupLevelDependenciesFilteringByComponent
           ? [
               {
-                type: 'component_ids',
+                type: 'component_names',
                 title: __('Component'),
                 multiSelect: true,
                 unique: true,
diff --git a/ee/app/assets/javascripts/dependencies/components/filtered_search/tokens/component_token.vue b/ee/app/assets/javascripts/dependencies/components/filtered_search/tokens/component_token.vue
index 06feee51d9eda41965848d621358bea375157bfd..32d31ae0011a8c8c905281da0acef3bdac7c5fbb 100644
--- a/ee/app/assets/javascripts/dependencies/components/filtered_search/tokens/component_token.vue
+++ b/ee/app/assets/javascripts/dependencies/components/filtered_search/tokens/component_token.vue
@@ -8,7 +8,6 @@ import {
 } from '@gitlab/ui';
 import { createAlert } from '~/alert';
 import { s__ } from '~/locale';
-import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import componentsQuery from 'ee/dependencies/graphql/group_components.query.graphql';
 
 export default {
@@ -61,9 +60,6 @@ export default {
     selectedComponentNames() {
       return this.selectedComponents.map(({ name }) => name);
     },
-    selectedComponentIds() {
-      return this.selectedComponents.map(({ id }) => getIdFromGraphQLId(id));
-    },
     tokenValue() {
       return {
         ...this.value,
@@ -128,7 +124,7 @@ export default {
   <gl-filtered-search-token
     :config="config"
     v-bind="{ ...$props, ...$attrs }"
-    :multi-select-values="selectedComponentIds"
+    :multi-select-values="selectedComponentNames"
     :value="tokenValue"
     v-on="$listeners"
     @select="toggleSelectedComponent"
diff --git a/ee/spec/frontend/dependencies/components/filtered_search/group_dependencies_filtered_search_spec.js b/ee/spec/frontend/dependencies/components/filtered_search/group_dependencies_filtered_search_spec.js
index 0153d66953851e31b328e4355708aed2d647c819..e9e51eb5e4ae667aecdfe7b40a2032facc6a81bf 100644
--- a/ee/spec/frontend/dependencies/components/filtered_search/group_dependencies_filtered_search_spec.js
+++ b/ee/spec/frontend/dependencies/components/filtered_search/group_dependencies_filtered_search_spec.js
@@ -59,7 +59,7 @@ describe('GroupDependenciesFilteredSearch', () => {
         ${'License'}   | ${{ title: 'License', type: 'licenses', multiSelect: true, token: LicenseToken }}
         ${'Project'}   | ${{ title: 'Project', type: 'project_ids', multiSelect: true, token: ProjectToken }}
         ${'Packager'}  | ${{ title: 'Packager', type: 'package_managers', multiSelect: true, token: PackagerToken }}
-        ${'Component'} | ${{ title: 'Component', type: 'component_ids', multiSelect: true, token: ComponentToken }}
+        ${'Component'} | ${{ title: 'Component', type: 'component_names', multiSelect: true, token: ComponentToken }}
       `('contains a "$tokenTitle" search token', ({ tokenConfig }) => {
         expect(findFilteredSearch().props('availableTokens')).toMatchObject(
           expect.arrayContaining([