diff --git a/app/client/package-lock.json b/app/client/package-lock.json
index 520ff827c..05083ad47 100644
--- a/app/client/package-lock.json
+++ b/app/client/package-lock.json
@@ -41,7 +41,7 @@
         "react-sticky-box": "2.0.5",
         "react-switch": "7.0.0",
         "react-table": "7.8.0",
-        "react-window": "1.8.10",
+        "react-virtuoso": "4.6.2",
         "smoothscroll-polyfill": "0.4.4",
         "uuid": "9.0.1"
       },
@@ -58,7 +58,6 @@
         "@types/react": "18.2.47",
         "@types/react-dom": "18.2.18",
         "@types/react-ranger": "2.0.4",
-        "@types/react-window": "1.8.8",
         "@types/smoothscroll-polyfill": "0.3.3",
         "@types/uuid": "9.0.7",
         "husky": "8.0.3",
@@ -5303,15 +5302,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/react-window": {
-      "version": "1.8.8",
-      "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz",
-      "integrity": "sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==",
-      "dev": true,
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -17826,27 +17816,18 @@
         "react-dom": ">=16.13"
       }
     },
-    "node_modules/react-window": {
-      "version": "1.8.10",
-      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz",
-      "integrity": "sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==",
-      "dependencies": {
-        "@babel/runtime": "^7.0.0",
-        "memoize-one": ">=3.1.1 <6"
-      },
+    "node_modules/react-virtuoso": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-4.6.2.tgz",
+      "integrity": "sha512-vvlqvzPif+MvBrJ09+hJJrVY0xJK9yran+A+/1iwY78k0YCVKsyoNPqoLxOxzYPggspNBNXqUXEcvckN29OxyQ==",
       "engines": {
-        "node": ">8.0.0"
+        "node": ">=10"
       },
       "peerDependencies": {
-        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+        "react": ">=16 || >=17 || >= 18",
+        "react-dom": ">=16 || >=17 || >= 18"
       }
     },
-    "node_modules/react-window/node_modules/memoize-one": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
-      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
-    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -24714,15 +24695,6 @@
         "@types/react": "*"
       }
     },
-    "@types/react-window": {
-      "version": "1.8.8",
-      "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz",
-      "integrity": "sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==",
-      "dev": true,
-      "requires": {
-        "@types/react": "*"
-      }
-    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -33693,21 +33665,10 @@
         "debounce": "^1.2.1"
       }
     },
-    "react-window": {
-      "version": "1.8.10",
-      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz",
-      "integrity": "sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==",
-      "requires": {
-        "@babel/runtime": "^7.0.0",
-        "memoize-one": ">=3.1.1 <6"
-      },
-      "dependencies": {
-        "memoize-one": {
-          "version": "5.2.1",
-          "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
-          "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
-        }
-      }
+    "react-virtuoso": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-4.6.2.tgz",
+      "integrity": "sha512-vvlqvzPif+MvBrJ09+hJJrVY0xJK9yran+A+/1iwY78k0YCVKsyoNPqoLxOxzYPggspNBNXqUXEcvckN29OxyQ=="
     },
     "read-cache": {
       "version": "1.0.0",
diff --git a/app/client/package.json b/app/client/package.json
index 12b9ac85b..e556a8474 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -48,7 +48,6 @@
     "@types/react": "18.2.47",
     "@types/react-dom": "18.2.18",
     "@types/react-ranger": "2.0.4",
-    "@types/react-window": "1.8.8",
     "@types/smoothscroll-polyfill": "0.3.3",
     "@types/uuid": "9.0.7",
     "husky": "8.0.3",
@@ -90,7 +89,7 @@
     "react-sticky-box": "2.0.5",
     "react-switch": "7.0.0",
     "react-table": "7.8.0",
-    "react-window": "1.8.10",
+    "react-virtuoso": "4.6.2",
     "smoothscroll-polyfill": "0.4.4",
     "uuid": "9.0.1"
   },
diff --git a/app/client/src/components/pages/StateTribal.Tabs.AdvancedSearch.js b/app/client/src/components/pages/StateTribal.Tabs.AdvancedSearch.js
index a6b884284..a6813914d 100644
--- a/app/client/src/components/pages/StateTribal.Tabs.AdvancedSearch.js
+++ b/app/client/src/components/pages/StateTribal.Tabs.AdvancedSearch.js
@@ -1,7 +1,7 @@
 // @flow
 /** @jsxImportSource @emotion/react */
 
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useMemo, useState } from 'react';
 import { css } from '@emotion/react';
 import { useWindowSize } from '@reach/window-size';
 import Select, { createFilter } from 'react-select';
@@ -9,8 +9,8 @@ import * as query from '@arcgis/core/rest/query';
 // components
 import LoadingSpinner from 'components/shared/LoadingSpinner';
 import { GlossaryTerm } from 'components/shared/GlossaryPanel';
-import MenuList from 'components/shared/MenuList';
 import Modal from 'components/shared/Modal';
+import PaginatedSelect from 'components/shared/PaginatedSelect';
 import StateMap from 'components/shared/StateMap';
 import WaterbodyListVirtualized from 'components/shared/WaterbodyListVirtualized';
 // styled components
@@ -344,6 +344,13 @@ function AdvancedSearch() {
 
   // get a list of watersheds and build the esri where clause
   const [watersheds, setWatersheds] = useState(null);
+  const watershedOptions = useMemo(() => {
+    return watersheds
+      ? watersheds
+          .filter((watershed) => watershed.label) // filter out nulls
+          .sort((a, b) => a.label.localeCompare(b.label))
+      : [];
+  }, [watersheds]);
   useEffect(() => {
     if (activeState.value === '' || !watershedsLayerMaxRecordCount) return;
 
@@ -407,6 +414,11 @@ function AdvancedSearch() {
 
   // these lists just have the name and id for faster load time
   const [waterbodiesList, setWaterbodiesList] = useState(null);
+  const waterbodiesOptions = useMemo(() => {
+    return waterbodiesList
+      ? waterbodiesList.sort((a, b) => a.label.localeCompare(b.label))
+      : [];
+  }, [waterbodiesList]);
   // Get the features on the waterbodies point layer
   useEffect(() => {
     if (!stateAndOrganization || !summaryLayerMaxRecordCount) {
@@ -844,43 +856,27 @@ function AdvancedSearch() {
             </GlossaryTerm>
             :
           </span>
-          <Select
+          <PaginatedSelect
             aria-label="Watershed Names (HUC12)"
-            isMulti
             isLoading={!watersheds}
             disabled={!watersheds}
-            components={{ MenuList }} // virtualized list
             filterOption={createFilter({ ignoreAccents: false })} // performance boost
-            options={
-              watersheds
-                ? watersheds
-                    .filter((watershed) => watershed.label) // filter out nulls
-                    .sort((a, b) => a.label.localeCompare(b.label))
-                : []
-            }
+            options={watershedOptions}
             value={watershedFilter}
             onChange={(ev) => setWatershedFilter(ev)}
-            styles={reactSelectStyles}
           />
         </div>
 
         <div css={inputStyles}>
           <label htmlFor="waterbodies">Waterbody Names (IDs):</label>
-          <Select
-            inputId="waterbodies"
-            isMulti
-            isLoading={!waterbodiesList}
+          <PaginatedSelect
             disabled={!waterbodiesList}
-            components={{ MenuList }} // virtualized list
             filterOption={createFilter({ ignoreAccents: false })} // performance boost
-            options={
-              waterbodiesList
-                ? waterbodiesList.sort((a, b) => a.label.localeCompare(b.label))
-                : []
-            }
-            value={waterbodyFilter}
+            inputId="waterbodies"
+            isLoading={!waterbodiesList}
             onChange={(ev) => setWaterbodyFilter(ev)}
-            styles={reactSelectStyles}
+            options={waterbodiesOptions}
+            value={waterbodyFilter}
           />
         </div>
       </div>
diff --git a/app/client/src/components/shared/CharacteristicsSelect.tsx b/app/client/src/components/shared/CharacteristicsSelect.tsx
index 5dd1fadba..0bf7134d8 100644
--- a/app/client/src/components/shared/CharacteristicsSelect.tsx
+++ b/app/client/src/components/shared/CharacteristicsSelect.tsx
@@ -1,17 +1,16 @@
 /** @jsxImportSource @emotion/react */
 
 import { useContext, useMemo } from 'react';
-import Select from 'react-select';
 import { css } from '@emotion/react';
 // components
 import { GlossaryTerm } from 'components/shared/GlossaryPanel';
-import MenuList from 'components/shared/MenuList';
+import PaginatedSelect from 'components/shared/PaginatedSelect';
 // contexts
 import { LocationSearchContext } from 'contexts/locationSearch';
 // utils
 import { useMonitoringLocations } from 'utils/hooks';
 // styles
-import { groupHeadingStyles, reactSelectStyles } from 'styles/index';
+import { groupHeadingStyles } from 'styles/index';
 
 export default CharacteristicsSelect;
 export function CharacteristicsSelect({
@@ -66,19 +65,16 @@ export function CharacteristicsSelect({
         Filter by{' '}
         <GlossaryTerm term="Characteristics">Characteristics</GlossaryTerm>:
       </span>
-      <Select
+      <PaginatedSelect
         aria-label="Filter by Characteristics"
-        components={{ MenuList }}
         formatGroupLabel={formatGroupLabel}
         formatOptionLabel={formatOptionLabel}
         isDisabled={monitoringPeriodOfRecordStatus === 'failure'}
         isLoading={monitoringPeriodOfRecordStatus === 'pending'}
-        isMulti
         onChange={(options) => onChange(options.map((option) => option.value))}
         options={allCharacteristicOptions}
         placeholder="Select one or more characteristics..."
         styles={{
-          ...reactSelectStyles,
           groupHeading: (defaultStyles) => ({
             ...defaultStyles,
             ...groupHeadingStyles,
diff --git a/app/client/src/components/shared/MenuList.tsx b/app/client/src/components/shared/MenuList.tsx
deleted file mode 100644
index 9c6754c72..000000000
--- a/app/client/src/components/shared/MenuList.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { useWindowSize } from '@reach/window-size';
-import { useCallback, useEffect, useRef } from 'react';
-import { VariableSizeList } from 'react-window';
-import { components } from 'react-select';
-// types
-import type { MenuListProps } from 'react-select';
-
-export default MenuList;
-export function MenuList<T>(props: MenuListProps<T>) {
-  const { children, maxHeight } = props;
-  const { width } = useWindowSize();
-  const listRef = useRef<VariableSizeList | null>(null);
-
-  // keeps track of the size of the virtualized items. This handles
-  // items where the text wraps
-  const sizeMap = useRef<{ [index: number]: number }>({});
-  const setSize = useCallback((index: number, size: number) => {
-    sizeMap.current = { ...sizeMap.current, [index]: size };
-    listRef.current?.resetAfterIndex(index);
-  }, []);
-  const getSize = (index: number) => sizeMap.current[index] || 70;
-
-  // use the default style dropdown if there is no data
-  if (!Array.isArray(children) || children.length === 0) {
-    return <components.MenuList {...props}>{children}</components.MenuList>;
-  }
-
-  // determine if this is a group and get the children accordingly
-  let childrenToDisplay = children;
-  const hasSubChildren =
-    Array.isArray(children) &&
-    children.length === 1 &&
-    children[0].props?.children;
-  if (hasSubChildren) childrenToDisplay = children[0].props.children;
-
-  return (
-    <>
-      {hasSubChildren && children[0].props.label}
-      <VariableSizeList
-        ref={listRef}
-        width="100%"
-        height={maxHeight}
-        itemCount={childrenToDisplay.length}
-        itemSize={getSize}
-      >
-        {({ index, style }) => (
-          <div style={{ ...style, overflowX: 'hidden' }}>
-            <MenuItem
-              index={index}
-              width={width}
-              setSize={setSize}
-              value={childrenToDisplay[index]}
-            />
-          </div>
-        )}
-      </VariableSizeList>
-    </>
-  );
-}
-
-type MenuItemProps = {
-  index: number;
-  width: number;
-  setSize: (index: number, size: number) => void;
-  value: string;
-};
-
-function MenuItem({ index, width, setSize, value }: MenuItemProps) {
-  const rowRef = useRef<HTMLDivElement | null>(null);
-
-  // keep track of the height of the rows to autosize rows
-  useEffect(() => {
-    if (!rowRef?.current) return;
-
-    setSize(index, rowRef.current.getBoundingClientRect().height);
-  }, [setSize, index, width]);
-
-  return <div ref={rowRef}>{value}</div>;
-}
diff --git a/app/client/src/components/shared/PaginatedSelect.tsx b/app/client/src/components/shared/PaginatedSelect.tsx
new file mode 100644
index 000000000..c3351ca5c
--- /dev/null
+++ b/app/client/src/components/shared/PaginatedSelect.tsx
@@ -0,0 +1,172 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import Select, { components } from 'react-select';
+import { Virtuoso } from 'react-virtuoso';
+// styles
+import { reactSelectStyles } from 'styles/index';
+// types
+import type {
+  GroupBase,
+  MenuListProps,
+  Props as SelectProps,
+} from 'react-select';
+import type { VirtuosoHandle } from 'react-virtuoso';
+
+const ITEM_HEIGHT = 32;
+const PAGE_SIZE = 1000;
+
+function getListHeight(length: number | null) {
+  const maxItemsShown = 7;
+  return length && length < maxItemsShown
+    ? length * ITEM_HEIGHT
+    : maxItemsShown * ITEM_HEIGHT;
+}
+
+/*
+## Components
+*/
+
+const ItemContent = ({ item }: { item: string }) => item;
+
+export function PaginatedSelect(props: Props) {
+  const { options: optionsOrGroups, styles, ...rest } = props;
+
+  const options = useMemo(() => {
+    return optionsOrGroups.flatMap((groupOrOption) => {
+      if ('options' in groupOrOption) return groupOrOption.options;
+      return groupOrOption;
+    });
+  }, [optionsOrGroups]);
+
+  const [inputValue, setInputValue] = useState('');
+
+  const filteredOptions = useMemo(() => {
+    return options.filter((option) => {
+      return option.label.toLowerCase().includes(inputValue.toLowerCase());
+    });
+  }, [inputValue, options]);
+
+  const [startIndex, setStartIndex] = useState(0);
+
+  const loadNext = useCallback(() => {
+    let hasMore = false;
+    setStartIndex((prevStart) => {
+      if (prevStart + PAGE_SIZE * 2 >= filteredOptions.length) return prevStart;
+      hasMore = true;
+      return prevStart + PAGE_SIZE;
+    });
+    return hasMore;
+  }, [filteredOptions]);
+
+  const loadPrevious = useCallback(() => {
+    let hasMore = false;
+    setStartIndex((prevStart) => {
+      if (prevStart <= 0) return 0;
+      hasMore = true;
+      return prevStart - PAGE_SIZE;
+    });
+    return hasMore;
+  }, []);
+
+  const optionsOrGroupsPage = useMemo(() => {
+    const page = filteredOptions.slice(startIndex, startIndex + PAGE_SIZE * 2);
+    return 'options' in optionsOrGroups
+      ? [{ label: 'Group', options: page }]
+      : page;
+  }, [filteredOptions, optionsOrGroups, startIndex]);
+
+  const MenuList = useMemo(
+    () => wrapMenuList(loadPrevious, loadNext),
+    [loadNext, loadPrevious],
+  );
+
+  return (
+    <Select
+      components={{ MenuList }}
+      isMulti
+      onInputChange={(newValue) => {
+        setInputValue(newValue);
+        setStartIndex(0);
+      }}
+      onMenuClose={() => {
+        setInputValue('');
+        setStartIndex(0);
+      }}
+      options={optionsOrGroupsPage}
+      styles={{
+        ...reactSelectStyles,
+        ...styles,
+      }}
+      {...rest}
+    />
+  );
+}
+
+function wrapMenuList(loadPrevious: () => boolean, loadNext: () => boolean) {
+  return (props: MenuListProps<Option>) => {
+    const { children } = props;
+    const listRef = useRef<VirtuosoHandle | null>(null);
+
+    const handleHitBottom = (atBottom: boolean) => {
+      if (!atBottom) return;
+      if (loadNext()) {
+        listRef.current?.scrollToIndex(
+          PAGE_SIZE - Math.round(getListHeight(null) / ITEM_HEIGHT),
+        );
+      }
+    };
+
+    const handleHitTop = (atTop: boolean) => {
+      if (!atTop) return;
+      if (loadPrevious()) {
+        listRef.current?.scrollToIndex(PAGE_SIZE);
+      }
+    };
+
+    // Use the default style dropdown if there is no data.
+    if (!Array.isArray(children) || children.length === 0) {
+      return <components.MenuList {...props}>{children}</components.MenuList>;
+    }
+
+    const hasSubChildren =
+      children.length === 1 && Boolean(children[0].props?.children);
+
+    // Determine if this is a group and get the children accordingly.
+    const childrenToDisplay = hasSubChildren
+      ? children[0].props.children
+      : children;
+
+    return (
+      <>
+        {hasSubChildren && children[0].props.label}
+        <Virtuoso
+          atBottomStateChange={handleHitBottom}
+          atTopStateChange={handleHitTop}
+          data={childrenToDisplay}
+          itemContent={(_index, item) => <ItemContent item={item} />}
+          ref={listRef}
+          style={{
+            height: getListHeight(childrenToDisplay.length),
+            width: '100%',
+          }}
+        />
+      </>
+    );
+  };
+}
+
+/*
+## Types
+*/
+
+type Option = {
+  label: string;
+  value: string;
+};
+
+type Props = Omit<
+  SelectProps<Option, true, GroupBase<Option>>,
+  'components' | 'isMulti' | 'onInputChange' | 'onMenuClose'
+> &
+  Required<Pick<SelectProps<Option, true, GroupBase<Option>>, 'options'>>;
+
+export default PaginatedSelect;
diff --git a/app/client/src/components/shared/VirtualizedList.tsx b/app/client/src/components/shared/VirtualizedList.tsx
index fec69154a..19e1498a7 100644
--- a/app/client/src/components/shared/VirtualizedList.tsx
+++ b/app/client/src/components/shared/VirtualizedList.tsx
@@ -1,48 +1,8 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { VariableSizeList } from 'react-window';
-import throttle from 'lodash/throttle';
-import uniqueId from 'lodash/uniqueId';
+import { useState } from 'react';
+import { Virtuoso } from 'react-virtuoso';
 // utils
 import { useOnScreen } from 'utils/hooks';
-import type { CSSProperties, ReactNode } from 'react';
-
-type RowRendererProps = {
-  data: {
-    listId: string;
-    renderer: ({ index }: { index: number }) => ReactNode;
-    resizeObserver: ResizeObserver;
-  };
-  index: number;
-  style: CSSProperties;
-};
-
-function RowRenderer({ data, index, style }: RowRendererProps) {
-  const { listId, renderer, resizeObserver } = data;
-  const rowRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    return function cleanup() {
-      if (rowRef.current) resizeObserver.unobserve(rowRef.current);
-    };
-  }, [resizeObserver]);
-
-  const callbackRef = useCallback(
-    (node: HTMLDivElement) => {
-      if (!node) return;
-      resizeObserver.observe(node);
-      rowRef.current = node;
-    },
-    [resizeObserver],
-  );
-
-  return (
-    <div style={{ ...style, overflow: 'hidden' }}>
-      <div id={`${listId}-row-${index}`} ref={callbackRef}>
-        {renderer({ index })}
-      </div>
-    </div>
-  );
-}
+import type { ReactNode } from 'react';
 
 type Props = {
   items: Array<Object>;
@@ -50,85 +10,13 @@ type Props = {
 };
 
 function VirtualizedListInner({ items, renderer }: Props) {
-  const innerRef = useRef<VariableSizeList<any> | null>(null);
-  const outerRef = useRef();
-  const sizeMap = useRef<{ [index: string]: number }>({});
-  const setSize = useCallback((index: number, size: number) => {
-    sizeMap.current = { ...sizeMap.current, [index]: size };
-    innerRef.current?.resetAfterIndex(index);
-  }, []);
-  const getSize = (index: number) => sizeMap.current[index] || 150;
-  const [listId] = useState(uniqueId('list-'));
-
-  const resizeObserver = useMemo(
-    () =>
-      new ResizeObserver((entries) => {
-        entries.forEach((entry) => {
-          const index = parseInt(entry.target.id.split('-')[3]);
-          if (entry.borderBoxSize?.length) {
-            setSize(index, entry.borderBoxSize[0].blockSize);
-          } else {
-            setSize(index, entry.contentRect.height);
-          }
-        });
-      }),
-    [setSize],
-  );
-
-  useEffect(() => {
-    return function cleanup() {
-      resizeObserver.disconnect();
-    };
-  }, [resizeObserver]);
-
-  // make the virtualized list use the window's scroll bar
-  useEffect(() => {
-    const throttleTime = 10;
-    const handleWindowScroll = throttle(() => {
-      const { offsetTop } = outerRef.current || { offsetTop: 0 };
-
-      const scrollPosition =
-        window['scrollY'] ||
-        document.documentElement['scrollTop'] ||
-        document.body['scrollTop'] ||
-        0;
-
-      const scrollTop = scrollPosition - offsetTop;
-      innerRef.current?.scrollTo(scrollTop);
-    }, throttleTime);
-
-    window.addEventListener('scroll', handleWindowScroll);
-    return () => {
-      handleWindowScroll.cancel();
-      window.removeEventListener('scroll', handleWindowScroll);
-    };
-  }, []);
-
-  const itemData = useMemo(() => {
-    return {
-      listId,
-      renderer,
-      resizeObserver,
-    };
-  }, [listId, renderer, resizeObserver]);
-
   return (
-    <VariableSizeList
-      height={window.innerHeight}
-      itemCount={items.length}
-      itemData={itemData}
-      itemSize={getSize}
-      width="100%"
-      ref={innerRef}
-      outerRef={outerRef}
-      style={{
-        width: '100%',
-        height: '100%',
-        display: 'inline-block',
-      }}
-    >
-      {RowRenderer}
-    </VariableSizeList>
+    <Virtuoso
+      style={{ height: window.innerHeight }}
+      totalCount={items.length}
+      itemContent={(index) => renderer({ index })}
+      useWindowScroll
+    />
   );
 }
 
@@ -136,7 +24,7 @@ function VirtualizedListInner({ items, renderer }: Props) {
 // is visible on the DOM prior to rendering the actual
 // virtualized list. This component was added as a workaround
 // for an issue where the list would not display anything
-// or jump around when the list is not immediatly visible
+// or jump around when the list is not immediately visible
 // on the dom (i.e., the list is on the second tab).
 function VirtualizedList({ items, renderer }: Props) {
   const [ref, setRef] = useState<HTMLDivElement | null>(null);