How to find the input type file in react papaparser and mock it to jest test case?

Question

I am stuck at writing mock test case for react papaparser for csv file upload. It has a button and a div with x mark for clearing out input items from div.

I am able to mock button and div but not able to mock the input type = "file" element in jest. it doesnt accept even placeholder or any other property such as data-testid etc. So, could anyone point me how to do it?

I have added most of the code but let me know if more code is required to understand.

React Papaparser (CSVParser) for uploading csv files.

            <div>
              <FormGroup label="Upload Candidates">
                <p>
                  Upload candidates through csv file.
                </p>
    
                <CSVReader
                  onUploadAccepted={onUploadAccepted}
                  config={{ header: false, skipEmptyLines: true }}
                  id="csv-file-reader"
                  accept="text/csv, .csv"
                >
                  {({ getRootProps, acceptedFile, ProgressBar, getRemoveFileProps }: any) => (
                    <>
                      <div style={styles.csvReader}>
                        <Button className="mt-4" type="button" {...getRootProps()}>
                          Browse
                        </Button>
                        <div style={styles.acceptedFile}>{acceptedFile && acceptedFile.name}</div>
                        <Button variant={ButtonVariant.ICON} {...getRemoveFileProps()}>
                          <IconTimes height={12} width={12} />
                        </Button>
                      </div>
                    </>
                  )}
                </CSVReader>
              </FormGroup>
            </div>

   Resulting HTML Code looks like : 
   <input accept="text/csv, .csv" type="file" autocomplete="off" tabindex="-1" style="display: none;">
   <div style="display: flex; flex-direction: row; margin-bottom: 0px;"><button class="sui-relative sui-rounded sui-flex sui-items-center focus:sui-outline-none sui-font-bold sui-c-btn-primary sui-u-btn-medium sui-px-base sui-font-heading sui-text-h4 mt-4" type="button"><span class="sui-pointer-events-none sui-relative">Browse</span></button><div style="border: 1px solid rgb(204, 204, 204); height: 30px; line-height: 2; width: 80%; margin-left: 10px; margin-top: 17px;"></div><button class="sui-relative sui-rounded-full focus:sui-outline-none sui-c-btn-icon sui-p-2.5"><span class="sui-pointer-events-none sui-relative"><svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="sui-fill-current sui-pointer-events-none" aria-hidden="true"><padth d="ssdfsdf...."</path></svg></span></button></div>

Below is Code snippet for File (CSV) upload component :

it("is possible to upload candidates", async () => {
    
    expect(screen.getByRole("heading", { name: "Upload Candidates" })).toBeInTheDocument();
    expect(screen.getByRole("button", { name: "Browse" })).toBeInTheDocument();
    
    expect(uploadCandidateListMock).toHaveBeenCalledTimes(1);

    const testFile = new File([], "candidate.csv");

    expect(screen.queryByRole("status")).not.toBeInTheDocument();
    expect(screen.queryByPlaceholderText("placeh")).toBeInTheDocument;

    ############# Error at this line ##############
    userEvent.upload(screen.find("input") as HTMLInputElement, testFile);

    expect(showSuccessToastMock).toHaveBeenCalledWith("Contributors were successfully uploaded");
    expect(showWarningToastMock).not.toHaveBeenCalled();
    expect(showErrorToastMock).not.toHaveBeenCalled();
    expect(uploadCandidateMock).toHaveBeenCalledWith("610c9a15c6544bac2ba4a680", testFile);
  });