diff --git a/plugins/azure-devops/src/components/PullRequestsPage/lib/AutoCompleteIcon/AutoCompleteIcon.tsx b/plugins/azure-devops/src/components/PullRequestsPage/lib/AutoCompleteIcon/AutoCompleteIcon.tsx
index aea64ff23b..ca43b8e27b 100644
--- a/plugins/azure-devops/src/components/PullRequestsPage/lib/AutoCompleteIcon/AutoCompleteIcon.tsx
+++ b/plugins/azure-devops/src/components/PullRequestsPage/lib/AutoCompleteIcon/AutoCompleteIcon.tsx
@@ -15,15 +15,18 @@
  */
 
 import DoneAllIcon from '@material-ui/icons/DoneAll';
-import { withStyles } from '@material-ui/core/styles';
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
 
-export const AutoCompleteIcon = withStyles(
-  theme => ({
-    root: (props: { hasAutoComplete: boolean }) => ({
-      color: props.hasAutoComplete
-        ? theme.palette.success.main
-        : theme.palette.grey[400],
-    }),
+const useStyles = makeStyles(theme => ({
+  root: (props: { hasAutoComplete: boolean }) => ({
+    color: props.hasAutoComplete
+      ? theme.palette.success.main
+      : theme.palette.grey[400],
   }),
-  { name: 'AutoCompleteIcon' },
-)(DoneAllIcon);
+}));
+
+export const AutoCompleteIcon = (props: { hasAutoComplete: boolean }) => {
+  const classes = useStyles(props);
+  return <DoneAllIcon className={classes.root} />;
+};