I am preparing a form that has fields to allow the user to post his picture and a video about her/him(self). To post a picture I prepared a component based on input type file, but to upload a video I have used React Dropzone. Now I want to save this to redux, however when I try to do that redux is complaining that it is the non-serializable item, and when I put it into JSON.Stringify() redux is getting an empty object. What would be the optimal solution for that, I have to store it somewhere in-state, should it be a local state created in this step of the form (fortunately it is the last one) however if the user would like to go back to any previous step and come back this data will be lost

Please advise, the dropzone component is below, onResult is just a handler that takes the value and dispatches an action to redux

import React, { useCallback, useState } from "react";
import { useDropzone } from "react-dropzone";

export const FileDropzone = ({ onResult, fileTypes, maxFiles }) => {
    const [progress, setProgress] = useState(0);
    const [error, setError] = useState(false);

    const onDrop = useCallback(acceptedFiles => {
        acceptedFiles.forEach(file => {
            const reader = new FileReader();
            reader.onerror = () => setError(true);
            reader.onprogress = data => {
                if (data.lengthComputable) {
                    var progress = parseInt(
                        (data.loaded / data.total) * 100,
                        10
                    );
                    setProgress(progress);
                }
            };
            reader.onloadend = () => onResult(reader.result);
            reader.readAsArrayBuffer(file);
        });
    }, []);
    const { getRootProps, getInputProps } = useDropzone({
        onDrop,
        maxFiles,
        accept: fileTypes
    });

    return (
        <>
            <div
                className={`border border-${
                    error ? "danger" : "light"
                } rounded d-flex justify-content-center align-items-center hpx-100`}
                {...getRootProps()}
            >
                <input {...getInputProps()} />
                <p>Proszę kliknąć, lub upuścić wybrany plik.</p>
            </div>
            <div
                className="bg-primary hpx-20 mt-1"
                style={{ width: `${progress}%` }}
            ></div>
        </>
    );
};

Thank you