Использую mobx-react-lite и mobx-utils, во время успешного ответа от сервера возникает проблема с корректной отрисовкой

import { observer } from "mobx-react-lite";
import ComponentsListCard from "../../layouts/ComponentsListCard";
import React, { useEffect } from "react";
import Loading from "../../components/Loading";
import { tt } from "../../data/translate";
import configuratorStore from "../../store/configurator-store";
import { useNavigate } from "react-router-dom";
 
export function Configurator() {
  const navigate = useNavigate();
 
  useEffect(() => {
    const token = localStorage.getItem("token");
    if (!token) {
      navigate("/auth");
    }
 
    configuratorStore.fetchUserConfigurationAction();
  }, []);
 
  if (!configuratorStore.userConfigurations) {
    return <Loading />
  }
  
  const renderContent = () => {
    return configuratorStore.userConfigurations.case({
      pending: () => <ComponentsListCard loading={true} />,
      rejected: (error) => <div>Ошибка: {error.message}</div>,
      fulfilled: ({ data }) => {
        const componentsData = [];
        for (const key in tt.components) {
          componentsData.push({ title: key, ...data[key] });
        }
        return (
          <ComponentsListCard components={componentsData} />
        )
      },
    });
  };
 
  return (
    <div className="flex py-10">
      <div className="px-8 container flex gap-8">
        {renderContent()}
      </div>
    </div>
  );
}
 
export default observer(Configurator);

import { makeAutoObservable } from 'mobx';
import { fromPromise } from 'mobx-utils';
import { fetchUserConfiguration } from '../api/configurator-api';
 
class ConfiguratorStore {
  userConfigurations = null;
 
  constructor() {
    makeAutoObservable(this);
  }
 
  fetchUserConfigurationAction() {
    console.log('fetchUserConfigurationAction called');
    this.userConfigurations = fromPromise(fetchUserConfiguration());
    console.log(this.userConfigurations)
  }
}
 
export default new ConfiguratorStore();

import axios from "axios"
 
export const fetchUserConfiguration = async () => {
  return axios.get(`http://localhost:8080/api/configurator/getUserConfiguration`).then(response => response.data);
}