How to keep the same position in the component after handle with another component?

I have a component that renders a list of cards with images. I have a button that handles showing another component and then going back to the list of cards with images.

The problem is that when I go back to the list of cards with images, whenever I go back to this screen it goes to the top of the page, showing from card number 1.

I would like it to continue showing the list of images where I left off. For example, if I was viewing card number 5, when I return to the screen, I would like to continue seeing card number 5.

Can you tell me how can I do this?

Here’s my code I put into codesandbox.io

enter image description here

import React, { useState } from "react";
import "./App.css";

export default function App() {
  const [renderMap, setRenderMap] = useState(false);
  return (
    <div className="main-world">
      {!renderMap ? (
        <div className="all-cards">
          {Array.from(Array(12), (_, index) => (
            <div key={`index_${index}`} className="all-cards-item">
              <div className="card-content">
                <div>
                  <img
                    src={`https://picsum.photos/500/300/?image=${index * 7}`}
                    alt=""
                  />
                </div>
                <h1>Card - {index + 1}</h1>
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div>
          <h1>Map Area</h1>
        </div>
      )}
      <div className="content-button">
        <button
          onClick={() => {
            setRenderMap(!renderMap);
          }}
        >
          {!renderMap ? "Show Map" : "Show List"}
        </button>
      </div>
    </div>
  );
}

Thank you very much in advance.