拖放不起作用打字稿反应

Question

我使用的是 ReactJS，底层脚本是 typescript。我正在尝试实现拖放功能。代码如下：

function uploadImages(event: any) {
    const imageArray = []
    const greeter: HTMLHeadingElement = document.getElementById("app-images") as HTMLHeadingElement;
    if (greeter) {
      greeter.addEventListener("dragover", (event: DragEvent) => {
        event.preventDefault();
      }, false)
      greeter.addEventListener('drop', (dragEvent: DragEvent) => {
        dragEvent.preventDefault();
        if (event.target.files.length) {
          for (let i = 0; i < event.target.files.length; i++) {
            imageArray.push(event.target.files[i]);
          }
          setImages(imageArray);
        }
      }, false)
    }
    if (event.target.files.length) {
      for (let i = 0; i < event.target.files.length; i++) {
        imageArray.push(event.target.files[i]);
      }
      setImages(imageArray);
    }
  }

<div className="upload-container" id="app-images">
  <FileUploadLabel>
    <FileUploadInput
      type="file"
      multiple
      accept="image/*"
      onChange={(e) => uploadImages(e)}
    />
    Drop and Drop or <a>Browse</a> file to upload
    <i className="icon-upload"></i>
  </FileUploadLabel>
</div>

const FileUploadLabel = styled.label`
  border: 1px solid black;
  border-radius: 3px;
  padding: 3px;
`;
const FileUploadInput = styled.input`
  overflow: hidden;
  width: 0;
`;

但是每当我拖放 app-images 部分时，它都会在新选项卡中打开文件。不要把它放在 app-images 部分。如何解决这个问题？