I am trying to code a drag and drop upload but the not getting anywhere with react typescript. I have a working example but the problem is in google dev tools it is not showing any file.

Here is the code

import { IoCloseSharp, IoChevronForward } from "react-icons/io5";
import { GoCloudUpload } from "react-icons/go";
import { DragEvent, SyntheticEvent } from "react";

type props = {
  onClose: any;
};

const AccountActionsModal = ({ onClose }: props) => {
  const onDropFile = (e: DragEvent) => {
    e.preventDefault();
    const f = e.dataTransfer as DataTransfer
    console.log(f.files);
  };

  return (
    <>
      
            <form>
              <div className="AAFileInput">
                <label
                  htmlFor="Picture"
                  id="AAFileUpload"
                  onDrop={onDropFile}
                  onDragOver={(e) => {
                    e.preventDefault();
                  }}
                  onDragEnter={(e) => {
                    e.preventDefault();
                  }}
                >
                  <GoCloudUpload size={40} />
                  <br />
                  Upload File
                  <br />
                  <span style={{ color: "grey" }}>Drag and Drop</span>
                </label>

                <input type="file" name="Picture" id="Picture" />
              </div>
            </form>
          
    </>
  );
};

export default AccountActionsModal;

You can see I log the filelist but there is no files in the console. It shows 0. I have searched for answers some say that this is a bug in dev tools. because when I log just the event then also it shows 0 files.

FileList {length: 0}

Please help me figuring this out.