Javascript – How to prevent browser reload on file upload in React?

I have simple file upload form.

import React, { useState } from 'react';
import { FlexContainer } from '@styles/FlexContainer';

const TestUpload = () => {
  const [file, setFile] = useState<File>();

  const onFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (!event.target.files) return;

    setFile(event.target.files[0]);
  };

  return (
    <FlexContainer>
      <input
        type="file"
        onChange={onFileUpload}
        accept="image/*"
        capture="camera"
        id="fileFromCamera"
      />
      <input
        type="file"
        onChange={onFileUpload}
        accept="image/*"
        id="fileWithoutCamera"
      />
    </FlexContainer>
  );
};

export default TestUpload;

The problem is that when I’m uploading files on mobile devices, my app refreshes and the whole app remounts.

However, it happens only on deploy and works good on localhost. So maybe the issue could be in WebPack config?

I tried to fix it using code below in root component, but it didn’t help.

  useEffect(() => {
    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
      event.preventDefault();
    };
    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, []);