Показывать экран загрузки глобально в React.js при вызове его с разных страниц

Я пытался реализовать глобальный экран загрузки при получении данных из API, я прочитал этот ответ и попытался реализовать что-то подобное.

Загрузка.provider.js

import { createContext, useContext, useState } from "react";

const LoadingContext = createContext({
  loading: false,
  setLoading: null
});

export function LoadingProvider({ children }) {
  const [loading, setLoading] = useState(false);
  const value = { loading, setLoading };
  return (
    <LoadingContext.Provider value = {value}>{children}</LoadingContext.Provider>
  );
};

export function useLoading() {
  const context = useContext(LoadingContext);
  if (!context) {
    throw new Error('useLoading must be used within LoadingProvider');
  }

  return context;
};

App.js

На этот экран добавлен экран загрузки:

import Layout from '@/components/Layout/Layout';
import { LoadingProvider, useLoading } from '@/Providers/loading.provider';
import LoadingScreen from "./LoadingScreen";

export default function App({ Component, pageProps }) {
  const { loading } = useLoading();

  return (
    <>
      <CssBaseline />
      <LoadingProvider>
        <AppStateProvider>
          { loading && <LoadingScreen loading = {true} bgColor='#fff' spinnerColor = {'#00A1FF'} textColor='#676767'></LoadingScreen> }
          <Layout>
            <Component {...pageProps} />
          </Layout>
        </AppStateProvider>
      </LoadingProvider>
    </>
  );
};

У меня есть компонент макета, который содержит компоненты SideMenu, top AppBar и main:

Layout.js

export default function Layout({ children }) {
  return (
    <Fragment>
      <Box sx = {{ display: 'flex' }}>
        <AppBar />
        <SideMenu />
        <Box component = "main" sx = {mainContentWrapper}>
          <div className = {styles.container}>
            <main className = {styles.main}>
              {children}
            </main>
          </div>
        </Box>
      </Box>
    </Fragment>
  );
}

Теперь я пытался показать это со страницы ([identifier].js):

import { useLoading } from "@/Providers/loading.provider";

export default function MainPage({ response }) {
  const { loading, setLoading } = useLoading();
  const btnClickedAll = async (data) => {
    setLoading(true);
  };

  return (
    <Fragment>
      <Button sx = {{ ml: 2 }} key = {'btnAll'} onClick = {btnClickedAll} variant = "contained">All</Button>,
    </Fragment>
  );
}

Loading вызывается после установки его с помощью setLoading(true), но состояние внутри app.js не меняется. Может ли кто-нибудь помочь мне и указать мне правильное направление?

Отредактировано: внесены некоторые изменения в код в соответствии с предложением @DustInComp.