I just had to work through the same issue.
My solution (applied to the code in your original question) was to add an e.preventDefault()
statement to the onButtonClick
function.
...
const onButtonClick = (e) => {
e.preventDefault()
inputFile.current?.click();
};
return (
...
);