Почему не получается отобразить данные из внутреннего стейта при использовании redux?

Я не смогу выложить туда весь код. Вот конкретный код компонента

import React from 'react';
import { connect } from 'react-redux';
import axios from 'axios';
import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import Snackbar from '@material-ui/core/Snackbar';
import kebabCase from 'lodash/kebabCase';

import * as actions from '../../actions';
import Alert from '../Alert';
import CustomPapper from '../CustomPaper';

const actionCreators = {
  fetchImagesAdmin: actions.fetchImagesAdmin,
};

const AddPhotos = (props) => {
  const { fetchImagesAdmin } = props;
  const [openAlert, setOpenAlert] = React.useState(false);
  const [files, setFiles] = React.useState(null);
  const [fetchingState, setfetchingState] = React.useState('none');

  const handleCloseAlert = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }

    setOpenAlert(false);
  };

  const handleChange = ({ target }) => {
    const { files } = target;
    const resultFiles = [];

    for (const file of files) {
      const reader = new FileReader();
      const fileName = kebabCase(file.name.split('.')[0]);

      reader.onloadend = () => {
        resultFiles.push({ fileName, base64: reader.result });
      }

      reader.readAsDataURL(file);
    }

    setFiles(resultFiles);
  };

  const handleSubmitImages = async (e) => {
    e.preventDefault();
    setfetchingState('requested');
    try {
      await axios.post('/admin/upload', { files });
      fetchImagesAdmin();
      setfetchingState('finished');
      setOpenAlert(true);
      setFiles(null);
    } catch (e) {
      setfetchingState('failed');
    }
  };

  const renderFiles = () => {
    return (
      <div style={{ marginTop: 20 }}>
        <Grid container spacing={1}>
          {files.map(({ fileName, base64 }) => (
            <Grid key={fileName} item>
              <div style={{ width: 90, height: 90, overflow: 'hidden' }}>
                <img
                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                  src={base64}
                />
              </div>
            </Grid>
          ))}
        </Grid>
      </div>
    );
  };

  const renderFormAddPhotos = () => (
    <form autoComplete="off">
      <label htmlFor="file">
        <Button color="primary" component="span">
          Choose images
        </Button>
      </label>
      <input
        name='files'
        type='file'
        accept='image/*'
        id='file'
        multiple
        style={{ display: 'none' }}
        onChange={handleChange} />
      
      {files ? renderFiles() : null}

      <Button
        variant="contained"
        type="submit"
        color="primary"
        component="span"
        fullWidth
        disabled={!files || fetchingState === 'requested'}
        onClick={handleSubmitImages}
        style={{ marginTop: 40 }}
      >
        Upload
      </Button>
      {fetchingState !== 'failed' ? null : (
        <Box color="secondary.main" clone>
          <p style={{ padding: '0 14px 0 14px' }}>Failed to load image</p>
        </Box>
      )}
    </form>
  );

  return (
    <CustomPapper title="Add images">
      {renderFormAddPhotos()}
      <Snackbar
        open={openAlert}
        autoHideDuration={6000}
        onClose={handleCloseAlert}
      >
        <Alert onClose={handleCloseAlert} severity="success">
          Images upload successfully!
        </Alert>
      </Snackbar>
    </CustomPapper>
  );
};

export default connect(null, actionCreators)(AddPhotos);

Почему не получается отобразить данные из внутреннего стейта при использовании redux?

Klein Maximus, files берется после выбора изображений на клиенте:

const handleChange = ({ target }) => {
    const { files } = target;
    const resultFiles = [];

    for (const file of files) {
      const reader = new FileReader();
      const fileName = kebabCase(file.name.split('.')[0]);

      reader.onloadend = () => {
        resultFiles.push({ fileName, base64: reader.result });
      }

      reader.readAsDataURL(file);
    }

    setFiles(resultFiles);
  };

коннектится все стандартно:

export default connect(null, actionCreators)(AddPhotos);

Пытался использовать для хранения не внутренний стейт компонента, а стор редакса, получилось тоже самое (не работатет). Файлы отрисовываются только после нажатия на кнопку отправить.

Ошибка при установке пакетов npm i на мак и gulp, как исправить?

Спасибо за ответ. Вот скрины 2 ошибок. Но я не понимаю, что делать с package.json, так как он есть в папке
Если это не ошибки, подскажите установились ли они?
Заранее благодарю)