Задержка загрузки массива приводит к зависанию приложения

Йо-йо всем,

на моем пути практики искусства React я заметил ошибку, из-за которой я не мог найти хороший источник, который помог бы мне понять, что вызывает проблему.

Мой массив в дочернем компоненте загружается слишком долго, что приводит к ошибке.

1. Данные извлекаются из списка пользователей «jsonplaceholder».
2. Данные устанавливаются как состояние.
   
3. Отправлено на "UserProfilePage".
   
4. Отправлено в "UserProfileComponent".
   

Попытка получить доступ к URL "/user/1" не увенчается успехом, поскольку объект не определен.

*) Если вы прокомментируете «UserProfileComponent», а затем раскомментируете его без обновления, страница будет успешно загружена.
*) Копирование (не выборка) данных в App.js, присвоение их состоянию не приведет к краху системы.

APP.js

import { Component } from "react";
import { Redirect, Route, Switch } from "react-router-dom";
import "./App.css";

import Navigation from "./components/header/Navigation";
import PostsLog from "./components/Posts/PostsLog";

import UserProfileCollection from "./pages/UserProfileCollection";
import UserProfilePage from "./pages/UserProfilePage";

const POST_ENDPOINT = "https://jsonplaceholder.typicode.com/posts";
const USER_ENDPOINT = "https://jsonplaceholder.typicode.com/users";

class App extends Component {
  constructor() {
    super();
    this.state = {
      exUsersArray: [],
      exPostsArray: [],
    };
  }

  async componentDidMount() {
    try {
      const responseUser = await fetch(USER_ENDPOINT);
      const responsePost = await fetch(POST_ENDPOINT);
      const dataResponseUser = await responseUser.json();
      const dataResponsePost = await responsePost.json();
      this.setState({ exUsersArray: dataResponseUser });
      this.setState({ exPostsArray: dataResponsePost });
    } catch (error) {
      console.info(error);
    }
  }
  render() {
    const { exUsersArray, exPostsArray } = this.state;
    console.info(exUsersArray);
    return (
      <div className = "app">
        <Navigation />
        <main>
          <Switch>
            {/* REROUTES */}
            <Route path = "/" exact>
              <Redirect to = "/feed" />
            </Route>
            <Route path = "/users" exact>
              <Redirect to = "/user" />
            </Route>

            {/* REAL ROUTES */}
            <Route path = "/feed">
              <PostsLog usersInfo = {exUsersArray} usersPosts = {exPostsArray} />
            </Route>
            <Route path = "/user" exact>
              <UserProfileCollection usersInfo = {exUsersArray} />
            </Route>

            {/* DYNAMIC ROUTES */}
            <Route path = "/user/:userId">
              <UserProfilePage usersInfo = {exUsersArray} />
            </Route>
          </Switch>
        </main>
      </div>
    );
  }
}

export default App;

UserProfilePage.js

import { useParams } from "react-router-dom"
import UserProfileComponent from "../components/UserProfileComponent";

const UserProfilePage = ({usersInfo}) => {
    const params = useParams();
    const foundUser = usersInfo.find((user) => Number(user.id) === Number(params.userId))
    console.info("found user  ", foundUser);
    // console.info(usersInfo);
    console.info(params, " is params");
    
    return(
        <div>
            <UserProfileComponent userProfile = {foundUser}/>
            <p>Yo YO</p>
        </div>
    )
}

export default UserProfilePage;

UserProfileComponent

const UserProfileComponent = ({userProfile}) => {
console.info(userProfile)

  return (
    <div className = "text-group">
        <div className = "wrap-post">
        <p>
          <strong>Info</strong>
        </p>
        <img
          src = {`https://robohash.org/${userProfile.Id}.png`}
          id = "small-profile"
          alt = "user profile in circle"
        />
        <p><u><strong>ID</strong></u> : {userProfile.id}</p>
        <p>Name: {userProfile.name}</p>
        <p>@{userProfile.username}</p>
        <p>Email: {userProfile.email}</p>
        <p>
          {userProfile.address.street} {userProfile.address.suite}<br/>
          {userProfile.address.zipcode} {userProfile.address.city}
        </p>
        <p>Global position</p>
        <p>{userProfile.address.geo.lat}, {userProfile.address.geo.lang}</p>
        <p>{userProfile.phone}</p>
        <p>{userProfile.website}</p>
        <p>Company</p>
        <p>{userProfile.company.name}</p>
        <p>{userProfile.company.catchPhrase}</p>
        <p>{userProfile.company.bs}</p>
      </div>
    </div>
  );
};

export default UserProfileComponent;

Полный репозиторий здесь.
Я буду рад любым советам, которые помогут мне понять, что здесь произошло.
Буду признателен за любой совет, который поможет мне стать лучшим программистом.

С наилучшими пожеланиями.