Dropup in a component causes auto-scroll to previously opened dropup

I'm working on a React project where I have a reusable card component that appears multiple times on a single page. Each card has a Bootstrap dropup used to select the file that the user wishes to download (SVG or PNG).

The Problem:

When I open a dropup in one card (say, card #1), it works fine.

But when I scroll down and open the dropup in a different card (say, card #20), the page automatically scrolls back up to card #1.

Similarly, if I open the dropup in card #10, it scrolls to card #20. Then card #40 scrolls to card #10. It seems to scroll to whichever card had the previous open dropup.

What I suspect:

When I open any dropup, the previous one closes, which results in re-rendering of the previous component, hence the focus is shifted to that component. (I could be dead wrong here, I'm still a beginner)

Here's the code for my dropup:

<div className="dropup dropup-center">
  <button
    className="card-btn-custom dropdown-toggle"
    type="button"
    data-bs-toggle="dropdown"
    aria-expanded="false"
    title="Download"
  >
    <i className="bi bi-download"></i>
  </button>
  <ul className="dropdown-menu">
    <li>
      <button
        className="dropdown-item text-center"
        onClick={() => handleDownload("svg")}
      >Download SVG</button>
    </li>
    <li>
      <button
        className="dropdown-item text-center"
        onClick={() => handleDownload("png")}
      >Download PNG</button>
    </li>
  </ul>
</div>