diff --git a/internal/lookout/ui/package.json b/internal/lookout/ui/package.json
index d92a3bd35d9..119a7bd5afb 100644
--- a/internal/lookout/ui/package.json
+++ b/internal/lookout/ui/package.json
@@ -65,6 +65,7 @@
     "semver": "6.3.1",
     "tough-cookie": "^4.1.3",
     "typescript": "^4.9.3",
+    "use-debounce": "^10.0.0",
     "uuid": "^8.3.2",
     "validator": "^13.7.0",
     "web-vitals": "^0.2.4",
diff --git a/internal/lookout/ui/src/components/lookoutV2/DebouncedTextField.tsx b/internal/lookout/ui/src/components/lookoutV2/DebouncedTextField.tsx
deleted file mode 100644
index b8b866132c6..00000000000
--- a/internal/lookout/ui/src/components/lookoutV2/DebouncedTextField.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { TextField, TextFieldProps } from "@mui/material"
-import _ from "lodash"
-
-export interface DebouncedTextFieldProps {
-  textFieldProps: TextFieldProps
-  debouncedOnChange: (newValue: string) => void
-  debounceWaitMs: number
-}
-
-export const DebouncedTextField = ({ debouncedOnChange, debounceWaitMs, textFieldProps }: DebouncedTextFieldProps) => {
-  const onChange = _.debounce(debouncedOnChange, debounceWaitMs)
-  return <TextField {...textFieldProps} onChange={(e) => onChange(e.currentTarget.value)} />
-}
diff --git a/internal/lookout/ui/src/components/lookoutV2/JobsTableFilter.tsx b/internal/lookout/ui/src/components/lookoutV2/JobsTableFilter.tsx
index 5c1da37dcb2..747a1159d8a 100644
--- a/internal/lookout/ui/src/components/lookoutV2/JobsTableFilter.tsx
+++ b/internal/lookout/ui/src/components/lookoutV2/JobsTableFilter.tsx
@@ -2,10 +2,20 @@ import React, { RefObject, useEffect, useRef, useState } from "react"
 
 import MoreVert from "@material-ui/icons/MoreVert"
 import { Check } from "@mui/icons-material"
-import { Box, Checkbox, IconButton, InputAdornment, ListItemText, MenuItem, OutlinedInput, Select } from "@mui/material"
+import {
+  Box,
+  Checkbox,
+  IconButton,
+  InputAdornment,
+  ListItemText,
+  MenuItem,
+  OutlinedInput,
+  Select,
+  TextField,
+} from "@mui/material"
 import Menu from "@mui/material/Menu"
-import { DebouncedTextField } from "components/lookoutV2/DebouncedTextField"
 import { Match, MATCH_DISPLAY_STRINGS } from "models/lookoutV2Models"
+import { useDebouncedCallback } from "use-debounce"
 import { ANNOTATION_COLUMN_PREFIX, FilterType, isStandardColId, VALID_COLUMN_MATCHES } from "utils/jobsTableColumns"
 
 const ELLIPSIS = "\u2026"
@@ -161,38 +171,36 @@ const TextFilter = ({
   useEffect(() => {
     onSetTextFieldRef(ref)
   }, [ref])
+  const debouncedOnChange = useDebouncedCallback(onChange, 300)
   return (
-    <DebouncedTextField
-      debouncedOnChange={onChange}
-      debounceWaitMs={300}
-      textFieldProps={{
-        inputRef: ref,
-        type: "text",
-        size: "small",
-        defaultValue: defaultValue,
-        error: parseError !== undefined,
-        placeholder: label,
+    <TextField
+      onChange={(e) => debouncedOnChange(e.currentTarget.value)}
+      inputRef={ref}
+      type={"text"}
+      size={"small"}
+      defaultValue={defaultValue}
+      error={parseError !== undefined}
+      placeholder={label}
+      sx={{
+        width: "100%",
+      }}
+      inputProps={{
+        "aria-label": label,
         sx: {
+          padding: "3.5px 7px",
+          height: "1em",
           width: "100%",
         },
-        inputProps: {
-          "aria-label": label,
-          sx: {
-            padding: "3.5px 7px",
-            height: "1em",
-            width: "100%",
-          },
-        },
-        InputProps: {
-          style: {
-            paddingRight: 0,
-          },
-          endAdornment: (
-            <InputAdornment position="end">
-              <MatchSelect possibleMatches={possibleMatches} currentMatch={match} onSelect={onColumnMatchChange} />
-            </InputAdornment>
-          ),
+      }}
+      InputProps={{
+        style: {
+          paddingRight: 0,
         },
+        endAdornment: (
+          <InputAdornment position="end">
+            <MatchSelect possibleMatches={possibleMatches} currentMatch={match} onSelect={onColumnMatchChange} />
+          </InputAdornment>
+        ),
       }}
     />
   )
diff --git a/internal/lookout/ui/yarn.lock b/internal/lookout/ui/yarn.lock
index 43008be8c3f..dd48ba8ecd0 100644
--- a/internal/lookout/ui/yarn.lock
+++ b/internal/lookout/ui/yarn.lock
@@ -11289,6 +11289,11 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+use-debounce@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-10.0.0.tgz#5091b18d6c16292605f588bae3c0d2cfae756ff2"
+  integrity sha512-XRjvlvCB46bah9IBXVnq/ACP2lxqXyZj0D9hj4K5OzNroMDpTEBg8Anuh1/UfRTRs7pLhQ+RiNxxwZu9+MVl1A==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"