Component not rerendering when global state changes. React Redux Toolkit

I’m working on Mafia application for automatizion the gamemaster’s work. I have a UserPanel component, that shows all players, their number and fouls they have.

I have also an AdminPanel component which consists of ControlPanel component, MiddlePanel component and VotingPanel component. Here’s the screen of AdminPanel component

And the problem I have is that when I’m setting foul on the AdminPanel. It shows here, but it doesn’t on the UserPanel. I should notice that I’m using react-router-dom and UserPanel is on the localhost:3000 and AdminPanel is on the localhost:3000/admin. I don’t know why is it so, because the UserPanel and the MiddlePanel are subscribed to the gameSlice global state. Here’s UserPanel component code:

import React from "react";
import Player from "./Player";
import Timer from "./Timer";
import { useSelector } from "react-redux";

export default function UserPanel() {
    
    const players = useSelector((state) => state.gameReducer.players);

    return (
        <div className="user-panel">
            <div className="container">
                <h1>Mafia NUZP</h1>
                <div className="players-container">
                    {players.map(player => {
                        return <Player number={player.number} fouls={player.fouls} chosen={player.chosen}/>
                    })}
                </div>
                <Timer />
            </div>
        </div>
    )
}

MiddlePanel code:

import React from "react";
import Player from "../../Player";
import Role from "../../Role";
import Timer from "../../Timer";
import TimerControls from "./TimerControls";
import { useSelector } from "react-redux";

export default function MiddlePanel(props) {
    const players = useSelector((state) => state.gameReducer.players);
    let chosenPlayer = players.findIndex(player => player.chosen === true);

    return(
        <div className="middle-panel">
        <div className="chosen-player-container">
            <h1>Player {chosenPlayer + 1}</h1>
        </div>
        <div className="players-container">
            {players.map(player => {
              return <Player number={player.number} role={<Role role={player.role}/>} fouls={player.fouls} chosen={player.chosen}/>  
            })}
        </div>
        <div className="timer-container">
            <Timer />
            <TimerControls />
        </div>
    </div>
    )
}

ControlPanel code:

import React from "react";
import { setFoul, setRole } from "../../features/game/gameSlice";
import { useDispatch } from "react-redux";

export default function ControlPanel() {
    
    const dispatch = useDispatch();

    return(
        <div className="control-panel">
        <button className="btn btn-dark" onClick={() => dispatch(setRole({role: "Д"}))}>Сделать доном</button>
        <button className="btn btn-secondary" onClick={() => dispatch(setRole({role: "М"}))}>Сделать мафией</button>
        <button className="btn btn-warning" onClick={() => dispatch(setRole({role: "Ш"}))}>Сделать шерифом</button>
        <button className="btn btn-danger" onClick={() => dispatch(setRole({role: "К"}))}>Сделать мирным</button>
        <button className="btn btn-light" onClick={() => dispatch(setFoul())}>Поставить фол</button>
        <button className="btn btn-primary">Выставить на голосование</button>
        <button className="btn btn-danger">Изгнать</button>
        <button className="btn btn-info">Следующий игрок</button>
        <button className="btn btn-info">Предыдущий игрок</button>
    </div>
    )
}

And gameSlice code:

import { createSlice } from "@reduxjs/toolkit";

let players = [
    {number: 1, fouls: [null, null, null, null], role: null, chosen: false},
    {number: 2, fouls: [null, null, null, null], role: null, chosen: false},
    {number: 3, fouls: [null, null, null, null], role: null, chosen: false},
    {number: 4, fouls: [null, null, null, null], role: null, chosen: false},
    {number: 5, fouls: [null, null, null, null], role: null, chosen: false},
    {number: 6, fouls: [null, null, null, null], role: null, chosen: true},
    {number: 7, fouls: [null, null, null, null], role: null, chosen: false},
    {number: 8, fouls: [null, null, null, null], role: null, chosen: false},
    {number: 9, fouls: [null, null, null, null], role: null, chosen: false},
    {number: 10, fouls: [null, null, null, null], role: null, chosen: false}]

let admin = {

}

const initialState = {
    players: players,
    adminPanel: admin
}

const gameSlice = createSlice({
    name: "game",
    initialState,
    reducers: {
        setRole(state, action) {
            let {role} = action.payload
            let chosenIndex = state.players.findIndex(player => player.chosen === true);
            state.players[chosenIndex].role = role;
        },

        setFoul(state, action) {
            let chosenIndex = state.players.findIndex(player => player.chosen === true);
            
            let foulIndex = state.players[chosenIndex].fouls.findIndex(foul => foul === null);

            state.players[chosenIndex].fouls[foulIndex] = "F";
        },
    }
})

export const {setFoul, setRole} = gameSlice.actions

export default gameSlice.reducer