I've tried to save files captured by dropzone in the local state provider but when I try to get file values it is displayed as undefined type.

FileContext.js:

import { useState, useCallback } from 'react';
import constate from 'constate';

function useLocalReducer({ initialValues = {} } = {}) {
  const [localState, setLocalState] = useState(initialValues);

  const localDispatch = useCallback((newValues) => {
    setLocalState((prevState) => {
      return {
        ...prevState,
        ...newValues
      };
    });
  }, []);

  return { localState, localDispatch };
}

const [LocalFilesStateProvider, useLocalFilesState, useLocalFilesDispatch] = constate(
  useLocalReducer,
  (value) => value.localState,
  (value) => value.localDispatch
);

export { LocalFilesStateProvider, useLocalFilesState, useLocalFilesDispatch };

My Component.js return:

<LocalFilesStateProvider>
      <FormProvider {...methods}>
        ...
        {openAttachFilesModal && (
          <AttachFilesModal
            open={openAttachFilesModal}
            onClose={() => setOpenAttachFilesModal(false)}
          />
        )}
      </FormProvider>
    </LocalFilesStateProvider>

My AttachFilesModal.js has saved files this way:

const localDispatch = useLocalFilesDispatch();

const attachFiles = useCallback(() => {
    localDispatch({
      files: file.approved // file is dropzone files
    });
  }, [file, localDispatch]);

And my Component.js has used files this way:

const { files } = useLocalFilesState();
console.log(files); // undefined