Array map() retrieve old items

Question

As I know, The map() method creates a new array populated with the results of calling a provided function on every element in the calling array. I am having an array of objects. I want to render each item and it is working properly ! Here's the code I am using ->

<div className="itemsSection__items">
      {items &&
        items.map((item) => {
          return (
            <Item
              key={Math.random()}
              imageUrl={item.image}
              userName={item.userName}
            />
          );
        })}
    </div>

But after the items are rendered, I tried to console the items. But it only gives me an empty array ([]). So, even after the map function, how can I retrieve the items ?

Edit:

 socket.on("connect", () => {
    console.log("connected");
  });

  socket.on("newItem", (item) => {
    const newItem = JSON.parse(item);
    console.log(items)
  });

Here when I try consoling the items, it is an empty array !

Thanks !