React项目中复用卡片组件的Dropup触发自动滚动至此前打开位置的问题求助

各位好，我现在在做一个React项目，里面有个可复用的卡片组件，页面上会渲染很多个。每个卡片里都集成了一个Bootstrap的dropup组件，用来让用户选择下载SVG或者PNG格式的对应文件。

我遇到了一个很奇怪的问题：当我打开第一个卡片（比如第1张）的dropup时一切正常，但如果我往下滚动页面，打开另一个卡片（比如第20张）的dropup，页面会自动滚回第1张卡片的位置。类似地，打开第10张的dropup，页面会跳到上一次打开过的第20张；打开第40张的dropup，又会跳到第10张——看起来每次打开新的dropup，页面都会自动滚动到上一次打开过dropup的那个卡片所在位置。

我自己试着猜了下原因：会不会是打开新dropup的时候，之前的那个dropup会自动关闭，导致对应的卡片组件重新渲染，进而让页面焦点转移到了那个组件上，所以触发了滚动？不过我只是个React新手，这个猜测说不定完全不对😂

下面是我写的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>

有没有大佬能帮忙分析下这个问题到底出在哪？或者给我一些排查的方向？非常感谢！

内容来源于stack exchange