diff --git a/src/app/Dashboard/AutomatedAnalysis/ClickableAutomatedAnalysisLabel.tsx b/src/app/Dashboard/AutomatedAnalysis/ClickableAutomatedAnalysisLabel.tsx
index 719edfa221..e55dce124f 100644
--- a/src/app/Dashboard/AutomatedAnalysis/ClickableAutomatedAnalysisLabel.tsx
+++ b/src/app/Dashboard/AutomatedAnalysis/ClickableAutomatedAnalysisLabel.tsx
@@ -82,7 +82,7 @@ export const ClickableAutomatedAnalysisLabel: React.FC<ClickableAutomatedAnalysi
 
   return (
     <Popover
-      aria-label={t('ClickableAutomatedAnalysisresult.ARIA_LABELS.POPOVER')}
+      aria-label={t('ClickableAutomatedAnalysisLabel.ARIA_LABELS.POPOVER')}
       isVisible={isDescriptionVisible}
       headerContent={<div className={`${clickableAutomatedAnalysisKey}-popover-header`}>{result.name}</div>}
       alertSeverityVariant={alertPopoverVariant}
diff --git a/src/app/Events/EventTemplates.tsx b/src/app/Events/EventTemplates.tsx
index 24a52905df..1c129153ea 100644
--- a/src/app/Events/EventTemplates.tsx
+++ b/src/app/Events/EventTemplates.tsx
@@ -357,7 +357,7 @@ export const EventTemplates: React.FC<EventTemplatesProps> = (_) => {
                   type="search"
                   placeholder="Filter..."
                   aria-label="Event template filter"
-                  onChange={setFilterText}
+                  onChange={(_, value: string) => setFilterText(value)}
                   value={filterText}
                   isDisabled={errorMessage != ''}
                 />
diff --git a/src/app/Events/EventTypes.tsx b/src/app/Events/EventTypes.tsx
index 076376542c..35a7719545 100644
--- a/src/app/Events/EventTypes.tsx
+++ b/src/app/Events/EventTypes.tsx
@@ -213,7 +213,7 @@ export const EventTypes: React.FC<EventTypesProps> = (_) => {
   );
 
   const onFilterTextChange = React.useCallback(
-    (filterText: string) => {
+    (_, filterText: string) => {
       setFilterText(filterText);
       setCurrentPage(1);
     },
diff --git a/src/app/Login/BasicAuthForm.tsx b/src/app/Login/BasicAuthForm.tsx
index 0bfec71429..6a8e036926 100644
--- a/src/app/Login/BasicAuthForm.tsx
+++ b/src/app/Login/BasicAuthForm.tsx
@@ -16,7 +16,19 @@
 
 import { AuthMethod } from '@app/Shared/Services/service.types';
 import { ServiceContext } from '@app/Shared/Services/Services';
-import { ActionGroup, Button, Checkbox, Form, FormGroup, Text, TextInput, TextVariants } from '@patternfly/react-core';
+import {
+  ActionGroup,
+  Button,
+  Checkbox,
+  Form,
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  Text,
+  TextInput,
+  TextVariants,
+} from '@patternfly/react-core';
 import { Base64 } from 'js-base64';
 import * as React from 'react';
 import { map } from 'rxjs/operators';
@@ -85,7 +97,12 @@ export const BasicAuthForm: React.FC<FormProps> = ({ onSubmit }) => {
 
   return (
     <Form onSubmit={handleSubmit}>
-      <FormGroup label="Username" isRequired fieldId="username" helperText="Please provide your username">
+      <FormGroup label="Username" isRequired fieldId="username">
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>Please provide your username</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
         <TextInput
           isRequired
           type="text"
@@ -97,7 +114,12 @@ export const BasicAuthForm: React.FC<FormProps> = ({ onSubmit }) => {
           onKeyDown={handleKeyDown}
         />
       </FormGroup>
-      <FormGroup label="Password" isRequired fieldId="password" helperText="Please provide your password">
+      <FormGroup label="Password" isRequired fieldId="password">
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>Please provide your password</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
         <TextInput
           isRequired
           type="password"
diff --git a/src/app/Modal/DeleteWarningModal.tsx b/src/app/Modal/DeleteWarningModal.tsx
index 5a1dc38e2a..9d310fbe4f 100644
--- a/src/app/Modal/DeleteWarningModal.tsx
+++ b/src/app/Modal/DeleteWarningModal.tsx
@@ -54,7 +54,7 @@ export const DeleteWarningModal: React.FC<DeleteWarningProps> = ({
   );
 
   const onInnerClose = React.useCallback(
-    (ev?: React.MouseEvent) => {
+    (ev?: KeyboardEvent | React.MouseEvent<Element, MouseEvent>) => {
       ev && ev.stopPropagation();
       onClose();
     },
diff --git a/src/app/RecordingMetadata/BulkEditLabels.tsx b/src/app/RecordingMetadata/BulkEditLabels.tsx
index e47f92a3fa..353bf3232f 100644
--- a/src/app/RecordingMetadata/BulkEditLabels.tsx
+++ b/src/app/RecordingMetadata/BulkEditLabels.tsx
@@ -28,7 +28,17 @@ import {
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { hashCode, portalRoot } from '@app/utils/utils';
-import { Button, Split, SplitItem, Stack, StackItem, Text, Tooltip, ValidatedOptions } from '@patternfly/react-core';
+import {
+  Button,
+  Icon,
+  Split,
+  SplitItem,
+  Stack,
+  StackItem,
+  Text,
+  Tooltip,
+  ValidatedOptions,
+} from '@patternfly/react-core';
 import { HelpIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 import { combineLatest, concatMap, filter, first, forkJoin, map, Observable, of } from 'rxjs';
@@ -291,7 +301,9 @@ export const BulkEditLabels: React.FC<BulkEditLabelsProps> = ({
                 }
                 appendTo={portalRoot}
               >
-                <HelpIcon noVerticalAlign />
+                <Icon>
+                  <HelpIcon />
+                </Icon>
               </Tooltip>
             </SplitItem>
           </Split>
diff --git a/src/app/RecordingMetadata/RecordingLabelFields.tsx b/src/app/RecordingMetadata/RecordingLabelFields.tsx
index a35210ea83..fbdbd62b41 100644
--- a/src/app/RecordingMetadata/RecordingLabelFields.tsx
+++ b/src/app/RecordingMetadata/RecordingLabelFields.tsx
@@ -21,6 +21,7 @@ import {
   FormHelperText,
   HelperText,
   HelperTextItem,
+  Icon,
   List,
   ListItem,
   Popover,
@@ -261,7 +262,11 @@ export const RecordingLabelFields: React.FC<RecordingLabelFieldsProps> = ({
               variant="link"
               aria-label="Remove Label"
               isDisabled={isDisabled}
-              icon={<CloseIcon color="gray" size="sm" />}
+              icon={
+                <Icon size="sm">
+                  <CloseIcon color="gray" />{' '}
+                </Icon>
+              }
             />
           </SplitItem>
         </Split>
diff --git a/src/app/Recordings/ActiveRecordingsTable.tsx b/src/app/Recordings/ActiveRecordingsTable.tsx
index ee731ee486..2cecf8f77e 100644
--- a/src/app/Recordings/ActiveRecordingsTable.tsx
+++ b/src/app/Recordings/ActiveRecordingsTable.tsx
@@ -867,7 +867,7 @@ export const ActiveRecordingRow: React.FC<ActiveRecordingRowProps> = ({
   const handleToggle = React.useCallback(() => toggleExpanded(expandedRowId), [expandedRowId, toggleExpanded]);
 
   const handleCheck = React.useCallback(
-    (checked: boolean) => {
+    (_, checked: boolean) => {
       handleRowCheck(checked, index);
     },
     [index, handleRowCheck],
diff --git a/src/app/Recordings/ArchivedRecordingsTable.tsx b/src/app/Recordings/ArchivedRecordingsTable.tsx
index 35cb9cec29..e4301f2cfe 100644
--- a/src/app/Recordings/ArchivedRecordingsTable.tsx
+++ b/src/app/Recordings/ArchivedRecordingsTable.tsx
@@ -786,7 +786,7 @@ export const ArchivedRecordingRow: React.FC<ArchivedRecordingRowProps> = ({
   }, [expandedRowId, expandedRows]);
 
   const handleCheck = React.useCallback(
-    (checked: boolean) => {
+    (_, checked: boolean) => {
       handleRowCheck(checked, index);
     },
     [index, handleRowCheck],
diff --git a/src/app/Recordings/Filters/DatetimeFilter.tsx b/src/app/Recordings/Filters/DatetimeFilter.tsx
index 98f09a30ff..91b0e30234 100644
--- a/src/app/Recordings/Filters/DatetimeFilter.tsx
+++ b/src/app/Recordings/Filters/DatetimeFilter.tsx
@@ -82,7 +82,7 @@ export const DateTimeFilter: React.FC<DateTimeFilterProps> = ({ onSubmit }) => {
   );
 
   const handleTextInput = React.useCallback(
-    (value: string) => {
+    (_, value: string) => {
       setDatetimeInput((_) => {
         if (value === '') {
           return _emptyDatetimeInput;
diff --git a/src/app/Recordings/Filters/DurationFilter.tsx b/src/app/Recordings/Filters/DurationFilter.tsx
index e9a78d4078..b88be56ee8 100644
--- a/src/app/Recordings/Filters/DurationFilter.tsx
+++ b/src/app/Recordings/Filters/DurationFilter.tsx
@@ -32,7 +32,7 @@ export const DurationFilter: React.FC<DurationFilterProps> = ({
   const isContinuous = React.useMemo(() => durations && durations.includes('continuous'), [durations]);
 
   const handleContinuousCheckBoxChange = React.useCallback(
-    (checked) => {
+    (_, checked: boolean) => {
       onContinuousDurationSelect(checked);
     },
     [onContinuousDurationSelect],
@@ -56,7 +56,7 @@ export const DurationFilter: React.FC<DurationFilterProps> = ({
           value={duration}
           id="duration-input"
           aria-label="duration filter"
-          onChange={(e) => setDuration(Number(e))}
+          onChange={(e, value) => setDuration(Number(value))}
           min="0"
           onKeyDown={handleEnterKey}
         />
diff --git a/src/app/Recordings/Filters/LabelFilter.tsx b/src/app/Recordings/Filters/LabelFilter.tsx
index a8e7d536ee..4e39450bb5 100644
--- a/src/app/Recordings/Filters/LabelFilter.tsx
+++ b/src/app/Recordings/Filters/LabelFilter.tsx
@@ -16,8 +16,20 @@
 
 import { parseLabels, getLabelDisplay } from '@app/RecordingMetadata/utils';
 import { Recording } from '@app/Shared/Services/api.types';
-import { Label } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  Label,
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption,
+  SelectOptionProps,
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+} from '@patternfly/react-core';
+import { TimesIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 
 export interface LabelFilterProps {
@@ -28,10 +40,11 @@ export interface LabelFilterProps {
 
 export const LabelFilter: React.FC<LabelFilterProps> = ({ recordings, filteredLabels, onSubmit }) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
+  const [filterValue, setFilterValue] = React.useState('');
 
   const onSelect = React.useCallback(
-    (_, selection, isPlaceholder) => {
-      if (!isPlaceholder) {
+    (_, selection: string) => {
+      if (selection) {
         setIsExpanded(false);
         onSubmit(selection);
       }
@@ -39,7 +52,11 @@ export const LabelFilter: React.FC<LabelFilterProps> = ({ recordings, filteredLa
     [onSubmit, setIsExpanded],
   );
 
-  const labels = React.useMemo(() => {
+  const onToggle = React.useCallback(() => setIsExpanded((isExpanded) => !isExpanded), [setIsExpanded]);
+
+  const onInputChange = React.useCallback((_, inputVal: string) => setFilterValue(inputVal), [setFilterValue]);
+
+  const labelOptions = React.useMemo(() => {
     const labels = new Set<string>();
     recordings.forEach((r) => {
       if (!r || !r.metadata || !r.metadata.labels) return;
@@ -50,24 +67,62 @@ export const LabelFilter: React.FC<LabelFilterProps> = ({ recordings, filteredLa
       .sort();
   }, [recordings, filteredLabels]);
 
+  const filteredLabelOptions = React.useMemo(() => {
+    return !filterValue ? labelOptions : labelOptions.filter((l) => l.includes(filterValue.toLowerCase()));
+  }, [filterValue, labelOptions]);
+
+  const selectOptionProps: SelectOptionProps[] = React.useMemo(() => {
+    if (!filteredLabelOptions.length) {
+      return [{ isDisabled: true, children: `No results found for "${filterValue}"`, value: undefined }];
+    }
+    return filteredLabelOptions.map((l) => ({ children: l, value: l }));
+  }, [filteredLabelOptions]);
+
+  const toggle = React.useCallback(
+    (toggleRef: React.Ref<MenuToggleElement>) => (
+      <MenuToggle ref={toggleRef} variant="typeahead" onClick={onToggle} isExpanded={isExpanded} isFullWidth>
+        <TextInputGroup isPlain>
+          <TextInputGroupMain
+            value={filterValue}
+            onClick={onToggle}
+            onChange={onInputChange}
+            autoComplete="off"
+            placeholder="Filter by label..."
+            isExpanded={isExpanded}
+            role="combobox"
+            id="typeahead-label-filter"
+            aria-controls="typeahead-label-select"
+          />
+          <TextInputGroupUtilities>
+            {filterValue ? (
+              <Button
+                variant="plain"
+                onClick={() => {
+                  setFilterValue('');
+                }}
+                aria-label="Clear input value"
+              >
+                <TimesIcon aria-hidden />
+              </Button>
+            ) : null}
+          </TextInputGroupUtilities>
+        </TextInputGroup>
+      </MenuToggle>
+    ),
+    [onToggle, isExpanded, filterValue, onInputChange, setFilterValue],
+  );
+
   return (
-    <Select
-      variant={SelectVariant.typeahead}
-      onToggle={setIsExpanded}
-      onSelect={onSelect}
-      isOpen={isExpanded}
-      aria-label="Filter by label"
-      typeAheadAriaLabel="Filter by label..."
-      placeholderText="Filter by label..."
-      maxHeight="16em"
-    >
-      {labels.map((option, index) => (
-        <SelectOption key={index} value={option}>
-          <Label key={option} color="grey">
-            {option}
-          </Label>
-        </SelectOption>
-      ))}
+    <Select toggle={toggle} onSelect={onSelect} isOpen={isExpanded} aria-label="Filter by label">
+      <SelectList id="typeahead-label-select">
+        {selectOptionProps.map(({ value, children }, index) => (
+          <SelectOption key={index} value={value}>
+            <Label key={value} color="grey">
+              {children}
+            </Label>
+          </SelectOption>
+        ))}
+      </SelectList>
     </Select>
   );
 };
diff --git a/src/app/Recordings/Filters/NameFilter.tsx b/src/app/Recordings/Filters/NameFilter.tsx
index d25963e94f..18233f8161 100644
--- a/src/app/Recordings/Filters/NameFilter.tsx
+++ b/src/app/Recordings/Filters/NameFilter.tsx
@@ -15,7 +15,20 @@
  */
 
 import { Recording } from '@app/Shared/Services/api.types';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption,
+  SelectOptionProps,
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+} from '@patternfly/react-core';
+import { SelectVariant } from '@patternfly/react-core/deprecated';
+import { TimesIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 
 export interface NameFilterProps {
@@ -26,10 +39,11 @@ export interface NameFilterProps {
 
 export const NameFilter: React.FC<NameFilterProps> = ({ recordings, filteredNames, onSubmit }) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
+  const [filterValue, setFilterValue] = React.useState('');
 
   const onSelect = React.useCallback(
-    (_, selection, isPlaceholder) => {
-      if (!isPlaceholder) {
+    (_, selection: string) => {
+      if (selection) {
         setIsExpanded(false);
         onSubmit(selection);
       }
@@ -37,25 +51,68 @@ export const NameFilter: React.FC<NameFilterProps> = ({ recordings, filteredName
     [onSubmit, setIsExpanded],
   );
 
+  const onToggle = React.useCallback(() => setIsExpanded((isExpanded) => !isExpanded), [setIsExpanded]);
+
+  const onInputChange = React.useCallback((_, inputVal: string) => setFilterValue(inputVal), [setFilterValue]);
+
   const nameOptions = React.useMemo(() => {
-    return recordings
-      .map((r) => r.name)
-      .filter((n) => !filteredNames.includes(n))
-      .map((option, index) => <SelectOption key={index} value={option} />);
+    return recordings.map((r) => r.name).filter((n) => !filteredNames.includes(n));
   }, [recordings, filteredNames]);
 
+  const filteredNameOptions = React.useMemo(() => {
+    return !filterValue ? nameOptions : nameOptions.filter((n) => n.includes(filterValue.toLowerCase()));
+  }, [filterValue, nameOptions]);
+
+  const selectOptionProps: SelectOptionProps[] = React.useMemo(() => {
+    if (!filteredNameOptions.length) {
+      return [{ isDisabled: true, children: `No results found for "${filterValue}"`, value: undefined }];
+    }
+    return filteredNameOptions.map((n) => ({ children: n, value: n }));
+  }, [filteredNameOptions]);
+
+  const toggle = React.useCallback(
+    (toggleRef: React.Ref<MenuToggleElement>) => (
+      <MenuToggle ref={toggleRef} variant="typeahead" onClick={onToggle} isExpanded={isExpanded} isFullWidth>
+        <TextInputGroup isPlain>
+          <TextInputGroupMain
+            value={filterValue}
+            onClick={onToggle}
+            onChange={onInputChange}
+            autoComplete="off"
+            placeholder="Filter by name..."
+            isExpanded={isExpanded}
+            role="combobox"
+            id="typeahead-name-filter"
+            aria-controls="typeahead-name-select"
+          />
+          <TextInputGroupUtilities>
+            {filterValue ? (
+              <Button
+                variant="plain"
+                onClick={() => {
+                  setFilterValue('');
+                }}
+                aria-label="Clear input value"
+              >
+                <TimesIcon aria-hidden />
+              </Button>
+            ) : null}
+          </TextInputGroupUtilities>
+        </TextInputGroup>
+      </MenuToggle>
+    ),
+    [onToggle, isExpanded, filterValue, onInputChange, setFilterValue],
+  );
+
   return (
-    <Select
-      variant={SelectVariant.typeahead}
-      onToggle={setIsExpanded}
-      onSelect={onSelect}
-      isOpen={isExpanded}
-      typeAheadAriaLabel="Filter by name..."
-      placeholderText="Filter by name..."
-      aria-label="Filter by name"
-      maxHeight="16em"
-    >
-      {nameOptions}
+    <Select toggle={toggle} onSelect={onSelect} isOpen={isExpanded} aria-label="Filter by name">
+      <SelectList>
+        {selectOptionProps.map(({ value, children }, index) => (
+          <SelectOption key={index} value={value}>
+            {children}
+          </SelectOption>
+        ))}
+      </SelectList>
     </Select>
   );
 };
diff --git a/src/app/Recordings/Filters/RecordingStateFilter.tsx b/src/app/Recordings/Filters/RecordingStateFilter.tsx
index f956b04f17..38843957aa 100644
--- a/src/app/Recordings/Filters/RecordingStateFilter.tsx
+++ b/src/app/Recordings/Filters/RecordingStateFilter.tsx
@@ -15,7 +15,7 @@
  */
 
 import { RecordingState } from '@app/Shared/Services/api.types';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
+import { Badge, MenuToggle, MenuToggleElement, Select, SelectOption } from '@patternfly/react-core';
 import * as React from 'react';
 
 export interface RecordingStateFilterProps {
@@ -27,25 +27,29 @@ export const RecordingStateFilter: React.FC<RecordingStateFilterProps> = ({ filt
   const [isOpen, setIsOpen] = React.useState(false);
 
   const onSelect = React.useCallback(
-    (_, selection) => {
+    (_, selection: RecordingState) => {
       setIsOpen(false);
       onSelectToggle(selection);
     },
     [setIsOpen, onSelectToggle],
   );
 
+  const toggle = React.useCallback(
+    (toggleRef: React.Ref<MenuToggleElement>) => (
+      <MenuToggle ref={toggleRef} onClick={() => setIsOpen((isOpen) => !isOpen)} isExpanded={isOpen}>
+        Filter by state
+        {filteredStates?.length ? <Badge isRead>{filteredStates.length}</Badge> : null}
+      </MenuToggle>
+    ),
+    [filteredStates, setIsOpen],
+  );
+
   return (
-    <Select
-      variant={SelectVariant.checkbox}
-      onToggle={setIsOpen}
-      onSelect={onSelect}
-      selections={filteredStates}
-      isOpen={isOpen}
-      aria-label="Filter by state"
-      placeholderText="Filter by state"
-    >
+    <Select toggle={toggle} onSelect={onSelect} selected={filteredStates} isOpen={isOpen} aria-label="Filter by state">
       {Object.values(RecordingState).map((rs) => (
-        <SelectOption aria-label={`${rs} State`} key={rs} value={rs} />
+        <SelectOption aria-label={`${rs} State`} key={rs} value={rs}>
+          {rs}
+        </SelectOption>
       ))}
     </Select>
   );
diff --git a/src/app/Recordings/RecordingActions.tsx b/src/app/Recordings/RecordingActions.tsx
index 30633557dc..ca5940398c 100644
--- a/src/app/Recordings/RecordingActions.tsx
+++ b/src/app/Recordings/RecordingActions.tsx
@@ -17,7 +17,8 @@ import { Recording, Target } from '@app/Shared/Services/api.types';
 import { NotificationsContext } from '@app/Shared/Services/Notifications.service';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
-import { Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core/deprecated';
+import { Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
+import { EllipsisVIcon } from '@patternfly/react-icons';
 import { Td } from '@patternfly/react-table';
 import * as React from 'react';
 import { Observable } from 'rxjs';
@@ -101,22 +102,41 @@ export const RecordingActions: React.FC<RecordingActionsProps> = (props) => {
     [setIsOpen],
   );
 
+  const toggle = React.useCallback(
+    (toggleRef: React.Ref<MenuToggleElement>) => (
+      <MenuToggle
+        ref={toggleRef}
+        onClick={() => setIsOpen((isOpen) => !isOpen)}
+        isExpanded={isOpen}
+        data-quickstart-id="recording-kebab"
+      >
+        <EllipsisVIcon />
+      </MenuToggle>
+    ),
+    [setIsOpen, isOpen],
+  );
+
   return (
     <Td isActionCell>
       <Dropdown
+        toggle={toggle}
+        popperProps={{
+          appendTo: document.body,
+          position: 'right',
+          direction: 'down',
+        }}
         aria-label={`${props.recording.name}-actions`}
-        menuAppendTo={document.body}
-        position="right"
-        direction="down"
-        toggle={<KebabToggle id="toggle-kebab" onToggle={setIsOpen} data-quickstart-id="recording-kebab" />}
         isPlain
         isOpen={isOpen}
-        dropdownItems={actionItems.map((action) => (
-          <DropdownItem key={action.key} onClick={() => onSelect(action)} data-quickstart-id={action.key}>
-            {action.title}
-          </DropdownItem>
-        ))}
-      />
+      >
+        <DropdownList>
+          {actionItems.map((action) => (
+            <DropdownItem key={action.key} onClick={() => onSelect(action)} data-quickstart-id={action.key}>
+              {action.title}
+            </DropdownItem>
+          ))}
+        </DropdownList>
+      </Dropdown>
     </Td>
   );
 };