diff --git a/client/package.json b/client/package.json
index a35c04caa8..9cfb1ed1e5 100644
--- a/client/package.json
+++ b/client/package.json
@@ -67,7 +67,6 @@
     "react-map-gl": "7.0.23",
     "react-range": "1.8.14",
     "react-redux": "8.0.2",
-    "react-virtualized": "9.22.5",
     "recharts": "2.9.0",
     "rooks": "7.14.1",
     "sharp": "0.32.6",
diff --git a/client/src/components/forms/select/autocomplete/component.tsx b/client/src/components/forms/select/autocomplete/component.tsx
index 114b495022..c1cc4042a4 100644
--- a/client/src/components/forms/select/autocomplete/component.tsx
+++ b/client/src/components/forms/select/autocomplete/component.tsx
@@ -4,7 +4,7 @@ import { Transition, Combobox } from '@headlessui/react';
 import { ChevronUpIcon, ChevronDownIcon, XIcon } from '@heroicons/react/solid';
 import { flip, useFloating, size, autoUpdate, offset } from '@floating-ui/react-dom';
 import { FloatingPortal } from '@floating-ui/react';
-import { List as VirtualizedList } from 'react-virtualized';
+import { useVirtualizer } from '@tanstack/react-virtual';
 
 import Hint from 'components/forms/hint';
 import Loading from 'components/loading';
@@ -88,42 +88,6 @@ const AutoCompleteSelect = <T,>({
     [options, query],
   );
 
-  const renderOption = useCallback(
-    ({ index, key, style }) => {
-      return (
-        <Combobox.Option
-          key={key}
-          style={style}
-          className={({ active, disabled }) =>
-            classnames(
-              'relative cursor-default text-sm select-none py-2 pl-3 pr-9 hover:cursor-pointer',
-              {
-                'bg-navy-50': active,
-                'pointer-events-none cursor-default': disabled,
-              },
-            )
-          }
-          value={filteredOptions[index]}
-          disabled={filteredOptions[index].disabled}
-          data-testid={`${props.id || props.name || props['data-testid']}-option`}
-        >
-          {({ selected, disabled }) => (
-            <div
-              className={classnames('block truncate', {
-                'text-navy-400': selected,
-                'text-gray-300': disabled,
-                'text-gray-900': !selected && !disabled,
-              })}
-            >
-              {filteredOptions[index].label}
-            </div>
-          )}
-        </Combobox.Option>
-      );
-    },
-    [filteredOptions, props],
-  );
-
   const clearSelection = useCallback(() => {
     setSelected(null);
     setQuery('');
@@ -141,6 +105,12 @@ const AutoCompleteSelect = <T,>({
     [selected],
   );
 
+  const virtualizedList = useVirtualizer({
+    count: filteredOptions.length,
+    getScrollElement: useCallback(() => refs.floating.current, [refs.floating]),
+    estimateSize: useCallback(() => rowHeight, [rowHeight]),
+  });
+
   // ? in case the value is not set in the hook initialization, it will be set here after first render.
   useEffect(() => {
     if (value) setSelected(value);
@@ -250,28 +220,51 @@ const AutoCompleteSelect = <T,>({
                 leaveFrom="opacity-100 translate-y-0"
                 leaveTo="opacity-0 translate-y-1"
                 afterLeave={handleAfterTransitionLeave}
-                className="z-50"
+                className="z-50 overflow-auto text-base bg-white rounded-md shadow-sm max-h-60 ring-1 ring-gray-200 focus:outline-none"
                 style={{
                   position: strategy,
                   top: y ?? 0,
                   left: x ?? 0,
+                  width: `${virtualizedListWidth}px`,
                 }}
                 ref={refs.setFloating}
               >
-                <Combobox.Options>
-                  <VirtualizedList
-                    className="w-full overflow-auto text-base bg-white rounded-md shadow-sm max-h-60 ring-1 ring-gray-200 focus:outline-none"
-                    width={virtualizedListWidth}
-                    height={virtualizedListHeight}
-                    rowCount={filteredOptions.length}
-                    rowHeight={rowHeight}
-                    rowRenderer={renderOption}
-                    noRowsRenderer={() => (
-                      <div className="relative px-4 py-2 text-sm text-gray-300 cursor-default select-none">
-                        No results
-                      </div>
-                    )}
-                  />
+                <Combobox.Options
+                  className="relative w-full"
+                  style={{
+                    height: `${virtualizedListHeight}px`,
+                  }}
+                >
+                  {virtualizedList.getVirtualItems().map((virtualItem) => (
+                    <Combobox.Option
+                      key={virtualItem.key}
+                      style={{ height: `${virtualItem.size}px` }}
+                      className={({ active, disabled }) =>
+                        classnames(
+                          'relative cursor-default text-sm select-none py-2 pl-3 pr-9 hover:cursor-pointer',
+                          {
+                            'bg-navy-50': active,
+                            'pointer-events-none cursor-default': disabled,
+                          },
+                        )
+                      }
+                      value={filteredOptions[virtualItem.index]}
+                      disabled={filteredOptions[virtualItem.index].disabled}
+                      data-testid={`${props.id || props.name || props['data-testid']}-option`}
+                    >
+                      {({ selected, disabled }) => (
+                        <div
+                          className={classnames('block truncate', {
+                            'text-navy-400': selected,
+                            'text-gray-300': disabled,
+                            'text-gray-900': !selected && !disabled,
+                          })}
+                        >
+                          {filteredOptions[virtualItem.index].label}
+                        </div>
+                      )}
+                    </Combobox.Option>
+                  ))}
                 </Combobox.Options>
               </Transition>
             </FloatingPortal>
diff --git a/client/yarn.lock b/client/yarn.lock
index e6456afc60..588383850d 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -200,7 +200,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.9.2":
   version: 7.18.9
   resolution: "@babel/runtime@npm:7.18.9"
   dependencies:
@@ -2990,13 +2990,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clsx@npm:^1.0.4":
-  version: 1.2.1
-  resolution: "clsx@npm:1.2.1"
-  checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12
-  languageName: node
-  linkType: hard
-
 "color-convert@npm:^1.9.0":
   version: 1.9.3
   resolution: "color-convert@npm:1.9.3"
@@ -3635,16 +3628,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dom-helpers@npm:^5.1.3":
-  version: 5.2.1
-  resolution: "dom-helpers@npm:5.2.1"
-  dependencies:
-    "@babel/runtime": ^7.8.7
-    csstype: ^3.0.2
-  checksum: 863ba9e086f7093df3376b43e74ce4422571d404fc9828bf2c56140963d5edf0e56160f9b2f3bb61b282c07f8fc8134f023c98fd684bddcb12daf7b0f14d951c
-  languageName: node
-  linkType: hard
-
 "draco3d@npm:1.5.5":
   version: 1.5.5
   resolution: "draco3d@npm:1.5.5"
@@ -6330,7 +6313,6 @@ __metadata:
     react-map-gl: 7.0.23
     react-range: 1.8.14
     react-redux: 8.0.2
-    react-virtualized: 9.22.5
     recharts: 2.9.0
     rooks: 7.14.1
     sharp: 0.32.6
@@ -7844,7 +7826,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.6.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -8262,23 +8244,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-virtualized@npm:9.22.5":
-  version: 9.22.5
-  resolution: "react-virtualized@npm:9.22.5"
-  dependencies:
-    "@babel/runtime": ^7.7.2
-    clsx: ^1.0.4
-    dom-helpers: ^5.1.3
-    loose-envify: ^1.4.0
-    prop-types: ^15.7.2
-    react-lifecycles-compat: ^3.0.4
-  peerDependencies:
-    react: ^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0
-    react-dom: ^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0
-  checksum: 01f5ed8d8db7c831d592172946c2b61fcb409bf6cbc84500468f12d6cf9b7e60453e332fac02dd608480d23cb14421f7f17716393e623e83bb10a7763fad9e2c
-  languageName: node
-  linkType: hard
-
 "react@npm:18.2.0":
   version: 18.2.0
   resolution: "react@npm:18.2.0"