Проблемы отображения React

Проблема заключается в том, что имеется компонент (класс) "Header"

function App() {
  return (
      <BrowserRouter basename={process.env.PUBLIC_URL}>
          <Header />
      </BrowserRouter>
    );
}

import  React, { Component } from  'react';
import {Route, Routes } from "react-router-dom";
import PostList from "./PostList";
import Post from "./Post";
import Login from "./Login";
import Cookies from "js-cookie";


class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            items: [{'ewrwere': "edewrwe"}],
        };
    }


    componentDidMount() {
        fetch('http://127.0.0.1:8000/api/auth/users/me/', {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${Cookies.get('token')}`,
            }
        })
            .then(res => res.json())
            .then(
                (result) => {
                    this.setState({
                        isLoaded: true,
                        items: result
                    });
                    console.log(this.state)
                    console.log(Cookies.get('token'))
                },
                (error) => {
                    this.setState({
                        isLoaded: true,
                        error
                    });
                }
            )
    }

    render() {
        const {error, isLoaded, items} = this.state;
        if (error) {
            return <div>Ошибка: {error.message}</div>;
        } else if (!isLoaded) {
            return <div>Загрузка...</div>;
        } else {
            if (!Cookies.get('token')) {
                return (
                    <header
                        className="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
                        <ul className="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
                            <a className="nav-link px-2 link-secondary" aria-current="page" href="/*">Главная</a>
                            <a className="nav-link px-2 link-secondary" href="/blog">Блог</a>
                            <a className="nav-link px-2 link-secondary" href="{% url 'create_post' %}">Создать пост</a>
                        </ul>

                        <div className="col-md-3 text-end">
                            <a href="/login" className="btn btn-outline-primary me-2">Login</a><a
                            href="{% url 'register' %}"
                            className="btn btn-primary">Register</a>
                        </div>
                        <div className="container-fluid">

                            <div className="content">
                                <Routes>
                                    <Route path='/blog' element={<PostList/>}/>
                                    <Route path='/post/:id' element={<Post/>}/>
                                    <Route path='/login' element={<Login/>}/>
                                </Routes>
                            </div>

                        </div>
                    </header>
                )
            } else {

                return (

                    <header
                        className="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
                        {Array.from(items).map(element => (
                            <div>
                                <ul className="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
                                    <a className="nav-link px-2 link-secondary" aria-current="page"
                                       href="/*">Главная</a>
                                    <a className="nav-link px-2 link-secondary" href="/blog">Блог</a>
                                    <a className="nav-link px-2 link-secondary" href="/">Создать пост</a>
                                </ul>
                                <p className="nav-link px-2 link-secondary">User: {element}</p>
                                <div className="container-fluid">

                                    <div className="content">
                                        <Routes>
                                            <Route path='/blog' element={<PostList/>}/>
                                            <Route path='/post/:id' element={<Post/>}/>
                                            <Route path='/login' element={<Login/>}/>
                                        </Routes>
                                    </div>

                                </div>
                            </div>
                        ))}
                    </header>
                );
            }
        }
    }
}

export default Header;

Если куков нет -все гуд, отображает все как надо. Но если куки есть, и он пытается достать по токену данные - не отображается вообще ничего

Но стоит мне убрать из JSX (в случае, если есть куки)

{Array.from(items).map(element => ())}

Как все заработает, но толку в этой компоненте тогда нет вообще. Подскажите как грамотнее реализовать это.

CORS_ORIGIN_WHITELIST = (
     'localhost:3000/'
 )
CORS_ALLOW_ALL_ORIGINS = True
CORS_ALLOW_CREDENTIALS = True