Как исправить ошибку TypeError: Invalid attempt to spread non-iterable instance react

UserReducer

const UNFOLLOW = 'UNFOLLOW';
const FOLLOW = 'FOLLOW';
const SET_USERS = 'SET-USERS';

export let followAC = (userId) => ({type: FOLLOW, userId: userId});
export let unfollowAC = (userId) => ({type: UNFOLLOW, userId: userId});
export let setUsersAC = (users) => ({type: SET_USERS, users: users});



let userPage = {
  users: [

  ]
}
export const userReducer = (state = userPage, action) => {
  switch (action.type) {
    case FOLLOW:
      return  {
            ...state,
            users: state.users.map(u => {
            if (u.id == action.userId){
              return {...u, follow: true}
            }
            return u
          })
        }
    case UNFOLLOW:
      return  {
        ...state,
        users: state.users.map(u => {
          if (u.id == action.userId) {
            return {...u, follow: false}
          }
          return u
        })
      }
    case SET_USERS:
      return {
        ...state,
        users: [...state.users,...action.users]
      }
    default:
      return state;
  }
}

UserContainer

import {connect} from 'react-redux';
import Users from './Users';
import {followAC, unfollowAC, setUsersAC} from '../../redux/UsersReducer';

const MapStateToProps = (state) => {
  debugger
  return {
    users: state.userPage.users
  };
}

const MapDispatchToProps = (dispatch) => {
  return {
    follow: (userId) => {
      dispatch(followAC(userId));
    },
    unfollow: (userId) => {
      dispatch(unfollowAC(userId));
    },
    setUsers: (user) => {
      dispatch(setUsersAC(user));
    }
  }
}

let UserContainer = connect(MapStateToProps,MapDispatchToProps)(Users);



export default UserContainer;

User.jsx

import React from 'react';
import s from './User.module.css';

let Users = (props) => {
  if (props.users.length === 0){
    props.setUsers(    {likesCount: 10,photo:'https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg',follow: true,fullName: 'Kirill A.', status: 'i\'am learning React', id: 1, location: {city: 'Krasnoyarsk', country:'Russia'}},
      {likesCount: 10,photo:'https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg',follow: false,fullName: 'Andrew B.', status: 'i\'am learning React', id: 2, location: {city: 'Krasnoyarsk', country:'Russia'}},
      {likesCount: 10,photo:'https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg',follow: true,fullName: 'Sergey G.', status: 'i\'am learning React', id: 3, location: {city: 'Krasnoyarsk', country:'Russia'}})
  }
  let renderName = props.users.map(el => {
      return (
          <div key={el.id}>
          <span>
            <div>
              <img className={s.photo} src={el.photo}/>
            </div>
            <div>
              {el.follow ? <button onClick={()=>props.unfollow(el.id)}>Follow</button>
                : <button onClick={()=>props.follow(el.id)}>unfollow</button>}
            </div>
          </span>
          <span>
            <span>
              <div>{el.fullName}</div>
              <div>{el.status}</div>
            </span>
            <span>
              <div>{el.location.city}</div>
              <div>{el.location.country}</div>
            </span>
          </span>
        </div>
      )
    }
  )
  return (
    <div>{renderName}</div>
  )
}

export default Users;