Возникла проблема со стилями

src/App.css

@@ -0,0 +1,15 @@
+.container {
+/*    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;*/
+    height: 500px;
+    overflow: auto;
+    border: 1px solid black;
+}
+.item {
+    font-size: 16pt;
+    border: 1px dotted gray;
+    /*margin: 5px 10px;
+    padding: 10px;*/
+    border-radius: 5px;
+}

src/App.jsx

@@ -1,45 +1,33 @@
-import { useState, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react';
-import './App.scss'
+import styles from './App.css';
 
-function VirtualList({ items, itemHeight=50, containerHeight=400 }) {
+const InfiniteList = () => {
-    const containerRef = useRef(null)
+  const [items, setItems] = useState([...Array(20).keys()]); // Initial data
-    //Положение большого нивидимого контейнера
+  const loaderRef = useRef(null);
-    const [scrollTop,setScrollTop] = useState(0);
-    //Количество отображаемых элементов
-    const visibleCount = Math.ceil(containerHeight / itemHeight);
-    //Общая высота нивидимого контейнера
-    const totalHeight = items.length * itemHeight;
-    //Начало и конец подгружаемых(отображаемых) элементов
-    const startIndex = Math.floor(scrollTop / itemHeight);
-    const endIndex = Math.min(startIndex + visibleCount + 1, items.length);
-    //Срез видимых элементов из общего списка
-    const visibleItems = items.slice(startIndex,endIndex);
 
-    const handleScroll = e => {
+  const loadMore = () => {
-        setScrollTop(e.target.scrollTop);
+    setItems((prev) => [...prev, ...Array(10).keys()].map((_, i) => prev.length + i));
-        console.log(e.target.scrollTop)
+  };
+
+  useEffect(() => {
+    const observer = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting) {
+        loadMore(); // Load next batch when the loader is seen
       }
+    });
+
+    if (loaderRef.current) observer.observe(loaderRef.current);
+    return () => observer.disconnect();
+  }, []);
 
   return (
-        <div ref={containerRef} className="container" style={{
+    <ul>
-                height: containerHeight
+      {items.map(item => <li key={item} className={ styles.item }>Item {item}</li>)}
-            }} onScroll={handleScroll}>
+      <div ref={loaderRef}>Loading more...</div>
-            <div style={{ height:totalHeight }}>
+    </ul>
-                <div style={{position:'relative', left:0, right: 0}}>                
+  );
-                    {visibleItems.map(item => (
+};
-                        <div className="item" key={item.id} style={{ height: itemHeight }}>
-                            {item.name}
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </div>
-    )
-}
-/*
 
-                    
-*/
 function App() {
     const generatedBigDataSet = () => {
         return Array.from({ length: 100 }, (_, index) => ({
@@ -54,7 +42,9 @@ function App() {
 		<>
             <div>
                 <h2>Визуализация большого списка</h2>
-                <VirtualList items={data} itemHeight={60} containerHeight={500} />
+                <div className={ styles.container }>
+                <InfiniteList />
+                </div>
             </div>
 		</>
 	)

src/App.scss

@@ -2,6 +2,7 @@
 /*    display: flex;
     flex-direction: column;
     flex-wrap: nowrap;*/
+    height: 500px;
     overflow: auto;
     border: 1px solid black;
 }