Use useInfiniteLoader hook instead of InfiniteLoader component

Replace InfiniteLoader component with the useInfiniteLoader hook as suggested
by @dennisoelkers. The hook provides a cleaner API and better type safety.
This eliminates the render prop pattern in favor of a direct hook call.

Co-authored-by: dennisoelkers <41929+dennisoelkers@users.noreply.github.com>

Author: Copilot

graylog2-web-interface/src/components/common/Select/AsyncCustomMenuList.tsx

@@ -16,7 +16,7 @@
  */
 import * as React from 'react';
 import { useRef } from 'react';
-import { InfiniteLoader } from 'react-window-infinite-loader';
+import { useInfiniteLoader } from 'react-window-infinite-loader';
 import styled from 'styled-components';
 
 import { WindowList } from 'components/common/Select/CustomMenuList';
@@ -45,19 +45,18 @@ const AsyncCustomMenuList = ({
   const items = children?.length ? children : [getNoOptionMessage()];
   const listRef = useRef(null);
 
+  const onRowsRendered = useInfiniteLoader({
+    isRowLoaded: (index: number) => index < children.length,
+    rowCount: total,
+    threshold: 30,
+    minimumBatchSize: 50,
+    loadMoreRows: loadOptions,
+  });
+
   return (
-    <InfiniteLoader
-      isRowLoaded={(index: number) => index < children.length}
-      rowCount={total}
-      threshold={30}
-      minimumBatchSize={50}
-      loadMoreRows={loadOptions}>
-      {({ onRowsRendered }) => (
-        <WindowList listRef={listRef} onRowsRendered={onRowsRendered}>
-          {items}
-        </WindowList>
-      )}
-    </InfiniteLoader>
+    <WindowList listRef={listRef} onRowsRendered={onRowsRendered}>
+      {items}
+    </WindowList>
   );
 };