How to properly optimize the render time of a collapsable card with lots of content?

Suppose I have several cards mounted in the DOM, all in collapsed state. As I click on one card's click to expand button, I have its content render. The issue that I'm running into, I've noticed, is that if this card has lots of content, then it will take several seconds to load. I've created a simplified demo of this below.

In the actual app, once a user click on a card, the state of that card is set to expanded and all relevant entities linked to it are rendered within the confines of this card. But if there are many entities, then this takes a while to load.

The only way to fix this, that I've been able to come up with, is remove all entities from my redux state and render only 1 card per card_id that is available, and maybe also just render the title of each card. Once the user clicks on a card, I'd then make requests to my backend and pull all the relevant entities. Another step further would be to chunk these requests -- so, instead of pulling all content/entities in 1 request, I'd instead make 2 to 4 requests and just show a spinner or loading text, until each entity is successfully retrieved.

Even with this example below, which just renders some dummy content, it takes several seconds to render:

import * as React from "react";
import styles from "./styles";

export default function App() {
  const [isExpanded, setIsExpanded] = React.useState(false);

  const handleExpand = React.useCallback(
    (isExpanded) => () => {
      setIsExpanded(!isExpanded);
    },
    []
  );

  return (
    <div style={styles.container}>
      <div style={styles.listContainer}>
        <div
          style={styles.button}
          onClick={handleExpand(isExpanded)}
        >
          click to {isExpanded ? "collapse" : "expand"}
        </div>
        <div style={styles.list}>
          {isExpanded &&
            Array.from({ length: 5000 }, (_, index) => (
              <div style={styles.content}>
                <div>some header {index + 1}</div>
                <input key={index} value={`some value ${index + 1}`} />
                <div>some content heading {index + 1}</div>
                <input value={`some other field ${index + 1}`} />
                <input
                  style={{ marginBottom: "1rem" }}
                  value={`and another field ${index + 1}`}
                />
              </div>
            ))}
        </div>
      </div>
    </div>
  );
}

I should probably note, that I've looked into react-window, but I feel like this isn't a solution for me, because I'm not really using a list. It's just a bunch of cards that can render off-screen, depending on the quantity of them.