【React,Redux,TypeScript】 dropzone にてファイル取得後 reducer にてエラーが出てしまう

Question

前提・実現したいこと

react-dropzone を用いて
取得した画像やPDF等のファイルデータを扱おうとしました。
ですが、dispatchを通した時にエラーとなってしまい
先に進めず、困っています。

環境
+-- react@17.0.1
+-- react-dom@17.0.1
+-- react-dropzone@11.2.4
+-- react-redux@7.2.2
+-- react-scripts@4.0.1
`-- typescript@3.8.3

npx create-react-app . --template redux-typescript

npm install --save react-dropzone

console に出されるエラーメッセージ

調べてみても、シリアル化できないというような理解しかできず
対応できなくなりました。

A non-serializable value was detected in an action, in the path: `payload.document`. Value: File {path: "gel-capsules-5834023_1280.jpg", name: "gel-capsules-5834023_1280.jpg", lastModified: 1609893376819, lastModifiedDate: Wed Jan 06 2021 09:36:16 GMT+0900 (日本標準時), webkitRelativePath: "", …}lastModified: 1609893376819lastModifiedDate: Wed Jan 06 2021 09:36:16 GMT+0900 (日本標準時) {}name: "gel-capsules-5834023_1280.jpg"path: "gel-capsules-5834023_1280.jpg"size: 148443type: "image/jpeg"webkitRelativePath: ""__proto__: File 
Take a look at the logic that dispatched this action:  {type: "drop/incrementFile", payload: {…}} 
(See https://redux.js.org/faq/actions#why-should-type-be-a-string-or-at-least-serializable-why-should-my-action-types-be-constants) 
(To allow non-serializable values see: https://redux-toolkit.js.org/usage/usage-guide#working-with-non-serializable-data)

ブラウザ に出されるエラーメッセージ

Unhandled Rejection (Error): Invariant failed: A state mutation was detected between dispatches, in the path 'drop.files.0.document.lastModifiedDate'.  This may cause incorrect behavior. (https://redux.js.org/troubleshooting#never-mutate-reducer-arguments)

該当のソースコード

Drop.tsx

onDrop内、コメントの部分以降のdispatchで引っ掛かります

import React, { useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { incrementFile, selectMyFile } from './dropSlice';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';

import {
  Typography,
  Paper
} from '@material-ui/core/';

import { useDropzone } from 'react-dropzone'
import { MY_FILE } from '../Types';

// スタイル
const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      display: 'flex',
    },
    paper: {
      padding: theme.spacing(2),
      textAlign: 'center',
      '& > *': {
        margin: theme.spacing(3),
      },
    },
    dropzone: {
      width: "100%",
      height: 200,
      boxSizing: "border-box",
      borderWidth: 2,
      borderColor: "#666666",
      borderStyle: "dashed",
      borderRadius: 5,
      verticalAlign: "top",
      marginRight: "2%",
    },
  }),
);

// Dropzone
const acceptFile = ['image/*', '.pdf'];
const maxFileSize = 10485760;

export function Drop() {
  const files = useSelector(selectMyFile);
  const dispatch = useDispatch();
  const classes = useStyles(useStyles);

  const onDrop = useCallback((acceptedFiles: File[]) => {

    acceptedFiles.forEach((file) => {
      console.log(file);

      const setFile: MY_FILE = {
        title: file.name,
        document: file,/// null でエラーなし
      }
　　　/// ここから先にてエラー
      dispatch(incrementFile(setFile));
    })

  }, [])
  // Dropzone
  const { getRootProps, getInputProps, isDragActive }
    = useDropzone({ onDrop, accept: acceptFile, minSize: 0, maxSize: maxFileSize })

  const filesList = files.map(file => (
    <li key={file.title}>
      {file.title}
    </li>
  ));
  return (
    <div>
      <Paper variant="outlined" elevation={3} className={classes.paper}>
        <Typography variant="h4">Drop test</Typography>
        <div>
          <Paper className={classes.dropzone} {...getRootProps()}>
            <input {...getInputProps()} />
            {
              isDragActive ?
                <p>Drop the files here ...</p> :
                <p>Drag 'n' drop some files here, or click to select files</p>
            }
          </Paper>
        </div>
      </Paper>
      <aside>
        <h4>Files</h4>
        <ul>{filesList}</ul>
      </aside>
    </div>
  );
}

export default Drop;

dropSlice.ts

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { RootState } from '../../app/store';
import { MY_FILE, DROP_STATE } from '../Types'

const initialState: DROP_STATE = {
  files: [{
    title: "",
    document: null,  
    }
  ],  
};

export const dropSlice = createSlice({
  name: 'drop',
  initialState,
  reducers: {
    incrementFile(state, action: PayloadAction<MY_FILE>) {
      state.files[0].title === '' ? state.files[0] = action.payload :
      state.files = [...state.files, action.payload]
    }
  },
});

export const { incrementFile } = dropSlice.actions;

export const selectMyFile = (state: RootState) => state.drop.files;

export default dropSlice.reducer;

Types.ts

export interface MY_FILE {
  title: string;
  document: File | null;
}

export interface DROP_STATE {
  files: MY_FILE[];
}

App.tsx

import React from 'react';
import { Drop } from './features/drop/Drop';
import './App.css';

function App() {
  return (
    <div className="App">
      <Drop />
    </div>
  );
}

export default App;