TypeError: Cannot read properties of undefined (reading 'props') Не могу найти ошибку в коде

Страница не отрисовывается, выдает ошибку:

App.js

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import './App.css';
import Header from './components/Header/Header';
import Profile from './components/Profile/Profile';
import DialogsContainer from './components/Dialogs/DialogsContainer';
import Sidebar from './components/Sidebar/Sidebar';
import UsersContainer from './components/Users/UsersContainer';

function App(props) {
  return (
    <BrowserRouter>
      <div className='wrapper'>
        <div className="container">
          <Header />
          <div className='inner'>
            <Sidebar />
            <div className='routes'>
              <Routes>
                <Route path='/profile/*' element={<Profile />}/>
                <Route path='/dialogs/*' 
                  element={<DialogsContainer />} />
                <Route path='/users/*' element={<UsersContainer />} />
              </Routes>
            </div>
          </div>
        </div>
      </div>
    </BrowserRouter>
  );
}

export default App;

usersReduser.js

const FOLLOW = 'FOLLOW';
const UNFOLLOW = 'UNFOLLOW';
const SET_USERS = 'SET_USERS';
const UPDATE_CURRENT_PAGE = 'UPDATE_CURRENT_PAGE';
const SET_TOTAL_USERS_COUNT = 'SET_TOTAL_USERS_COUNT';


const initialState = {
    users: [],
    pageSize: 3,
    totalUsersCount: 0,
    currentPage: 1
}

const usersReducer = (state = initialState, action) => {
    switch (action.type){
        case FOLLOW: {
            return {
                ...state,
                users: state.users.map(user => {
                    if (user.id === action.userId){
                        return {...user, followed: true};
                    }
                    return user;
                })
            }
        }

        case UNFOLLOW: {
            return {
                ...state,
                users: state.users.map(user => {
                    if (user.id === action.userId){
                        return {...user, followed: false};
                    }
                    return user;
                })
            }
        }

        case SET_USERS: {
            return {
                ...state,
                users: [...action.users]
            }
        }

        case UPDATE_CURRENT_PAGE: {
            return {
                ...state,
                currentPage: action.numberPage
            }
        }

        case SET_TOTAL_USERS_COUNT: {
            return {
                ...state,
                totalUsersCount: action.totalCount
            }
        }

        default:
            return state;
    }
}

export const followCreator = (userId) => ({type: FOLLOW, userId});
export const unfollowCreator = (userId) => ({type: UNFOLLOW, userId});
export const setUsersCreator = (users) => ({type: SET_USERS, users});
export const updateCurrentPageCreator = (numberPage) => ({type: UPDATE_CURRENT_PAGE, numberPage});
export const setTotalUsersCountCreator = (totalCount) => ({type: SET_TOTAL_USERS_COUNT, totalCount});

export default usersReducer;

UsersContainer.jsx

import React from "react";
import axios from "axios";
import { connect } from "react-redux";
import { followCreator, setTotalUsersCountCreator, setUsersCreator, unfollowCreator, updateCurrentPageCreator } from "../../redux/usersReducer";
import Users from "./Users";

class UsersContainer extends React.Component {
    componentDidMount() {
        if (this.props.users.length === 0) {
            axios.get(`https://social-network.samuraijs.com/api/1.0/users?page=${this.props.currentPage}&count=${this.props.pageSize}`)
                .then(response => {
                    this.props.setUsers(response.data.items);
                    this.props.setTotalUsersCount(response.data.totalCount);
                });
        }
    }

    onChangeNumberPage = (numberPage) => {
        axios.get(`https://social-network.samuraijs.com/api/1.0/users?page=${numberPage}&count=${this.props.pageSize}`)
                .then(response => this.props.setUsers(response.data.items))
        this.props.updateCurrentPage(numberPage)
    }

    render() {
        return <Users users={this.props.users}
        pageSize={this.props.pageSize}
        totalUsersCount={this.props.totalUsersCount}
        currentPage={this.props.currentPage}
        follow={this.props.follow}
        unfollow={this.props.unfollow}
        onChangeNumberPage={this.onChangeNumberPage}
        />
    }
}

const mapStateToProps = (state) => {
    return {
        users: state.USERS_PAGE.users,
        pageSize: state.USERS_PAGE.pageSize,
        totalUsersCount: state.USERS_PAGE.totalUsersCount,
        currentPage: state.USERS_PAGE.currentPage
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        follow: (userId) => {
            dispatch(followCreator(userId));
        },
        unfollow: (userId) => {
            dispatch(unfollowCreator(userId));
        },
        setUsers: (users) => {
            dispatch(setUsersCreator(users));
        },
        updateCurrentPage: (numberPage) => {
            dispatch(updateCurrentPageCreator(numberPage));
        },
        setTotalUsersCount: (totalCount) => {
            dispatch(setTotalUsersCountCreator(totalCount));
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(UsersContainer);

Users.jsx

import React from 'react';
import styles from './users.module.css';
import avatar from '../../assets/img/avatar.png'

const Users = (props) => {
    const pagesCount = Math.ceil(props.totalUsersCount / props.pageSize - 7680);
    const numbersPages = [];

    for (let i = 1; i <= pagesCount; i++) {
        numbersPages.push(i);
    }

    return (
        <div className={styles.users}>
            <ul className={styles.buttons}>
                {
                    numbersPages.map(number => {
                        return (
                            <li className={styles.item}>
                                <button onClick={() => props.onChangeNumberPage(number)} className={number === props.currentPage ? styles.button_active : styles.button}>{number}</button>
                            </li>
                        )
                    })
                }
            </ul>
            {
                this.props.users.map(user =>
                    <div className={styles.inner}>
                        <div className={styles.user}>
                            <img src={user.photos.small ? user.photos.small : avatar} alt="avatar" width={60} height={60} />
                            {
                                user.followed ?
                                    <button className={styles.following} onClick={() => this.props.unfollow(user.id)}>Отписаться</button> :
                                    <button className={styles.following} onClick={() => this.props.follow(user.id)}>Подписаться</button>
                            }
                        </div>

                        <div className={styles.info}>
                            <div className={styles.about}>
                                <h3 className={styles.name}>
                                    {user.name}
                                </h3>
                                <p className={styles.status}>
                                    {user.status}
                                </p>
                            </div>

                            <div className={styles.location}>
                                <p className={styles.city}>
                                    Vladivostok
                                </p>
                                <p className={styles.country}>
                                    Russia
                                </p>
                            </div>
                        </div>
                    </div>
                )
            }
        </div>
    )
}

export default Users;