react-dropzoneを利用するとReactベースのアプリケーションでファイルをドラッグアンドドロップするエリアを作成できます。公式ページのサンプルに加え、受け取ったデータをfunction外でも利用できるよう、useContextを利用してデータを受け渡ししました。

公式ページに掲載されているコードに、useContextで生成した変数globalStateを追加している。globalStateは別ファイルで生成し、アプリケーション全体を囲う位置にタグを設置しているので、基本的にどこからでもアクセスできる変数として生成しています。
useCallbackはコンポーネントの不要な再レンダリングを抑止する為に利用しますが、globalStateを併用する際には、変数の更新に対応する為、useCallbackの第二引数にglobalStateを追加しています。

今回はuseCallbackを利用していますが、react-dropzoneはuseCallbackを利用しなくても動作はする為、以下の様に関数を書き換える事でも対応はできました。

const onDrop = (acceptedFiles) => {
 ....
};