diff --git a/packages/eui/src/components/search_bar/filters/field_value_toggle_group_filter.tsx b/packages/eui/src/components/search_bar/filters/field_value_toggle_group_filter.tsx
index 9a4e9011a24b..91b658ad091a 100644
--- a/packages/eui/src/components/search_bar/filters/field_value_toggle_group_filter.tsx
+++ b/packages/eui/src/components/search_bar/filters/field_value_toggle_group_filter.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { Component } from 'react';
+import React, { FC } from 'react';
 import { EuiFilterButton } from '../../filter_group';
 import { Query } from '../query';
 import { OperatorType } from '../query/ast';
@@ -35,12 +35,14 @@ export interface FieldValueToggleGroupFilterProps {
   onChange: (value: Query) => void;
 }
 
-export class FieldValueToggleGroupFilter extends Component<FieldValueToggleGroupFilterProps> {
-  resolveDisplay(
+export const FieldValueToggleGroupFilter: FC<
+  FieldValueToggleGroupFilterProps
+> = (props) => {
+  const resolveDisplay = (
     config: FieldValueToggleGroupFilterConfigType,
     query: Query,
     item: FieldValueToggleGroupFilterItemType
-  ) {
+  ) => {
     const clause = query.getSimpleFieldClause(config.field, item.value);
     if (clause) {
       if (Query.isMust(clause)) {
@@ -52,41 +54,43 @@ export class FieldValueToggleGroupFilter extends Component<FieldValueToggleGroup
       };
     }
     return { active: false, name: item.name };
-  }
+  };
 
-  valueChanged(item: FieldValueToggleGroupFilterItemType, active: boolean) {
-    const { field } = this.props.config;
+  const valueChanged = (
+    item: FieldValueToggleGroupFilterItemType,
+    active: boolean
+  ) => {
+    const { field } = props.config;
     const { value, operator } = item;
     const query = active
-      ? this.props.query.removeSimpleFieldClauses(field)
-      : this.props.query
+      ? props.query.removeSimpleFieldClauses(field)
+      : props.query
           .removeSimpleFieldClauses(field)
           .addSimpleFieldValue(field, value, true, operator);
-    this.props.onChange(query);
-  }
+    props.onChange(query);
+  };
 
-  render() {
-    const { config, query } = this.props;
-    return config.items.map((item, index) => {
-      const { active, name } = this.resolveDisplay(config, query, item);
-      const onClick = () => {
-        this.valueChanged(item, active);
-      };
-      const key = `field_value_toggle_filter_item_${index}`;
-      const isLastItem = index === config.items.length - 1;
-      return (
-        <EuiFilterButton
-          key={key}
-          onClick={onClick}
-          isSelected={active}
-          hasActiveFilters={active}
-          aria-pressed={!!active}
-          withNext={!isLastItem}
-          isToggle
-        >
-          {name}
-        </EuiFilterButton>
-      );
-    });
-  }
-}
+  const { config, query } = props;
+
+  return config.items.map((item, index) => {
+    const { active, name } = resolveDisplay(config, query, item);
+    const onClick = () => {
+      valueChanged(item, active);
+    };
+    const key = `field_value_toggle_filter_item_${index}`;
+    const isLastItem = index === config.items.length - 1;
+    return (
+      <EuiFilterButton
+        key={key}
+        onClick={onClick}
+        isSelected={active}
+        hasActiveFilters={active}
+        aria-pressed={!!active}
+        withNext={!isLastItem}
+        isToggle
+      >
+        {name}
+      </EuiFilterButton>
+    );
+  });
+};