I am having trouble accessing any file chooser in Chrome (version 124.0.6367.60)

When clicking on the “Choose file” for <input type="file"/> the file chooser never shows up. Additionally, when I then go to click a button that is supposed to open an external link,I do not get redirected and the following error appears in my console: window.open blocked due to active file chooser.

I thought that maybe I need to reconfiguring the file chooser that I use in my localhost next.js app but that does not fix it. I can’t open any file chooser on any website online.

The only thing that works is quitting and reopening my Chrome browser.

Is it possible that my code is causing a file chooser to be perpetually open but hidden from view so I cannot close it?

<form onClick={() => document.querySelector(".input-field").click()}>
    <input className="input-field" type="file" onChange={(e) => updateImage(e)} hidden />
    <VStack onDragOver={handleDrag} onDrop={handleDrop}>
        {newImage ? () : (<Text>Drag and drop your file here</Text>)}
    </VStack>
<form>