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

сервер возвращает ответ в формате {"data": {},"status": "ok"}

Код компонента, который должен производить рендер на основе полученных данных от сервера:

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();

API

import axios from "axios"

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

Данные успешно принимаются от сервера. В Promise state = "fulfilled", но на экране продолжает отрабатывать компонент Loading. Только начал изучать react+mobx. Подскажите в чем заключается проблема?

Пробовал реакции в mobx, также в конечном результате state "fulfilled", но также продолжает висеть Loading