list with react-virtualized

src/components/DebugMessages.js

 import {  useState } from "react";
+import DebugList from"./DebugList";
 
 const DebugMessages =({socket})=>
 {
   const [debugMessages, setDebugMessages] = useState([]);
 
+
+
+
   socket.on("debugMessages", (res) => {
-    console.log(res);
-    setDebugMessages(res);
+
+    console.log('1',res)
+    // // console.log('2',res)
+    //  let db=[]
+    // let db=[res,...debugMessages]
+    // let dbl=db.map((msg)=>{return msg['id']})
+    setDebugMessages([res,...debugMessages]);
 
   })
     return(
-        <ul className="list-group">
-           {(debugMessages || []).map((msg) => (
-        <li className={"list-group-item " + msg.type }  key={`liMessages_${msg.msg_id}`}>{msg.message}</li>
-            ) )}
-      </ul>
+      //   <ul className="list-group">
+      //      {(debugMessages || []).map((msg, index) => (
+      //   <li className={"list-group-item " + msg.type }  key={`liMessages_${index}`}>{msg.message}</li>
+      //       ) )}
+      // </ul>
+      <DebugList data={debugMessages}  />
     )
 }
 export default DebugMessages;
\ No newline at end of file