diff --git a/src/toolbar/OpenFileButton.tsx b/src/toolbar/OpenFileButton.tsx
index fd3ec3af..a7108d73 100644
--- a/src/toolbar/OpenFileButton.tsx
+++ b/src/toolbar/OpenFileButton.tsx
@@ -5,7 +5,7 @@ import { Button, IRef, Intent, Spinner } from '@blueprintjs/core';
 import { Tooltip2 } from '@blueprintjs/popover2';
 import { useI18n } from '@shopify/react-i18n';
 import React from 'react';
-import Dropzone from 'react-dropzone';
+import { useDropzone } from 'react-dropzone';
 import { tooltipDelay } from '../app/constants';
 import { TooltipId } from './i18n';
 import en from './i18n.en.json';
@@ -43,94 +43,87 @@ const OpenFileButton: React.FC<OpenFileButtonProps> = (props) => {
         fallback: en,
     });
 
-    return (
-        <Dropzone
-            accept={props.fileExtension}
-            multiple={false}
-            noClick={props.onClick !== undefined}
-            onDropAccepted={(acceptedFiles) => {
-                // should only be one file since multiple={false}
-                acceptedFiles.forEach((f) => {
-                    const reader = new FileReader();
+    const { getRootProps, getInputProps } = useDropzone({
+        accept: props.fileExtension,
+        multiple: false,
+        noClick: props.onClick !== undefined,
+        onDropAccepted: (acceptedFiles) => {
+            // should only be one file since multiple={false}
+            acceptedFiles.forEach((f) => {
+                const reader = new FileReader();
 
-                    reader.onabort = (): void =>
-                        console.error('file reading was aborted');
-                    reader.onerror = (): void =>
-                        console.error('file reading has failed');
-                    reader.onload = (): void => {
-                        const binaryStr = reader.result;
-                        if (binaryStr === null) {
-                            throw Error('Unexpected null binaryStr');
-                        }
-                        if (typeof binaryStr === 'string') {
-                            throw Error('Unexpected string binaryStr');
-                        }
-                        props.onFile(binaryStr);
-                    };
-                    reader.readAsArrayBuffer(f);
-                });
-            }}
-            onDropRejected={(fileRejections) => {
-                // should only be one file since multiple={false}
-                fileRejections.forEach((r) => {
-                    props.onReject(r.file);
-                });
-            }}
-        >
-            {({ getRootProps, getInputProps }): JSX.Element => (
-                <Tooltip2
-                    content={i18n.translate(
-                        props.tooltip,
-                        props.tooltip === TooltipId.FlashProgress
-                            ? {
-                                  percent:
-                                      props.progress === undefined
-                                          ? ''
-                                          : i18n.formatPercentage(props.progress),
-                              }
-                            : undefined,
-                    )}
-                    placement="bottom"
-                    hoverOpenDelay={tooltipDelay}
-                    renderTarget={({
-                        ref: tooltipRef,
-                        isOpen: _tooltipIsOpen,
-                        ...tooltipProps
-                    }) => (
-                        <Button
-                            {...getRootProps({
-                                refKey: 'elementRef',
-                                elementRef: tooltipRef as IRef<HTMLButtonElement>,
-                                ...tooltipProps,
-                                intent: Intent.PRIMARY,
-                                disabled: props.enabled === false,
-                                style:
-                                    props.enabled === false
-                                        ? { pointerEvents: 'none' }
-                                        : undefined,
-                                // prevent focus from mouse click
-                                onMouseDown: (e) => e.preventDefault(),
-                                onClick: props.onClick,
-                            })}
-                        >
-                            <input {...getInputProps()} />
-                            {props.showProgress ? (
-                                <Spinner
-                                    value={props.progress}
-                                    intent={Intent.PRIMARY}
-                                />
-                            ) : (
-                                <img
-                                    src={props.icon}
-                                    alt={props.id}
-                                    style={{ pointerEvents: 'none' }}
-                                />
-                            )}
-                        </Button>
-                    )}
-                />
+                reader.onabort = (): void => console.error('file reading was aborted');
+                reader.onerror = (): void => console.error('file reading has failed');
+                reader.onload = (): void => {
+                    const binaryStr = reader.result;
+                    if (binaryStr === null) {
+                        throw Error('Unexpected null binaryStr');
+                    }
+                    if (typeof binaryStr === 'string') {
+                        throw Error('Unexpected string binaryStr');
+                    }
+                    props.onFile(binaryStr);
+                };
+                reader.readAsArrayBuffer(f);
+            });
+        },
+        onDropRejected: (fileRejections) => {
+            // should only be one file since multiple={false}
+            fileRejections.forEach((r) => {
+                props.onReject(r.file);
+            });
+        },
+    });
+
+    return (
+        <Tooltip2
+            content={i18n.translate(
+                props.tooltip,
+                props.tooltip === TooltipId.FlashProgress
+                    ? {
+                          percent:
+                              props.progress === undefined
+                                  ? ''
+                                  : i18n.formatPercentage(props.progress),
+                      }
+                    : undefined,
             )}
-        </Dropzone>
+            placement="bottom"
+            hoverOpenDelay={tooltipDelay}
+            renderTarget={({
+                ref: tooltipRef,
+                isOpen: _tooltipIsOpen,
+                ...tooltipProps
+            }) => (
+                <Button
+                    {...getRootProps({
+                        refKey: 'elementRef',
+                        elementRef: tooltipRef as IRef<HTMLButtonElement>,
+                        ...tooltipProps,
+                        intent: Intent.PRIMARY,
+                        disabled: props.enabled === false,
+                        style:
+                            props.enabled === false
+                                ? { pointerEvents: 'none' }
+                                : undefined,
+                        // prevent focus from mouse click
+                        onMouseDown: (e) => e.preventDefault(),
+                        onClick: props.onClick,
+                    })}
+                >
+                    <input {...getInputProps()} />
+                    {props.showProgress ? (
+                        <Spinner value={props.progress} intent={Intent.PRIMARY} />
+                    ) : (
+                        <img
+                            src={props.icon}
+                            alt={props.id}
+                            style={{ pointerEvents: 'none' }}
+                        />
+                    )}
+                </Button>
+            )}
+        />
     );
 };