помоги разобраться почему при использовании контекста этот код не выдает ошибку
import React, { useState } from "react";
import Animate from "../Components/Animate";
import { Outlet } from "react-router-dom";
import ClaimLeveler from "../Components/ClaimLeveler";
import Spinner from "../Components/Spinner";
import coinsmall from "../images/coinsmall.webp";
import { useUser } from "../context/userContext";


const Ref = () => {
  const { id, username, referrals, loading } = useUser();
  // eslint-disable-next-line
  const [claimLevel, setClaimLevel] = useState(false);
  const [copied, setCopied] = useState(false);

 
  const copyToClipboard = () => {

   const reflink = `https://t.me/geto_spirit_bot?start=r${id}`

    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(reflink).then(() => {
        setCopied(true);
        setTimeout(() => setCopied(false), 10000); // Reset the copied state after 2 seconds
      }).catch(err => {
        console.error('Failed to copy text: ', err);
      });
    } else {
      // Fallback method
      const textArea = document.createElement('textarea');
      textArea.value = reflink;
      document.body.appendChild(textArea);
      textArea.select();
      try {
        document.execCommand('copy');
        setCopied(true);
        setTimeout(() => setCopied(false), 2000); // Reset the copied state after 2 seconds
      } catch (err) {
        console.error('Failed to copy', err);
      }
      document.body.removeChild(textArea);
    }
  };


  const formatNumber = (num) => {
    if (num < 100000) {
      return new Intl.NumberFormat().format(num).replace(/,/g, " ");
    } else if (num < 1000000) {
      return new Intl.NumberFormat().format(num).replace(/,/g, " ");
    } else {
      // return (num / 1000000).toFixed(3).replace(".", ".") + " M";
      return new Intl.NumberFormat().format(num).replace(/,/g, " ");
    }
  };


  return (
        <>
           
        {loading ? ( // Display loading indicator if data is fetching
        <Spinner/>
      ) : (
    <>

      <Animate>
        <div className="w-full justify-center flex-col space-y-3 px-5">
          <div className="flex space-y-0 flex-col justify-center items-center">
            <h1 className="text-[#fff] -mb-2 text-[42px] font-semibold">
            {referrals.length} Users
            </h1>
            <span className="text-[#6ed86e] font-semibold text-[16px]">
              {/* + 0 */}
            </span>
          </div>

          <div className="w-full bg-cards rounded-[12px] px-3 py-4 flex flex-col">
            <span className="w-full flex justify-between items-center pb-2">
              <h2 className="text-[18px] font-semibold">My invite link:</h2>
              <span
                onClick={copyToClipboard}
                className="bg-gradient-to-b from-[#094e9d] to-[#0b62c4] font-medium py-[6px] px-4 rounded-[12px] flex items-center justify-center text-[16px]"
              >
              {copied ? <span>Copied!</span> : <span>Copy</span>}
              </span>
            </span>
            <div className="text-[#9a96a6] text-[13px]">
            https://t.me/geto_spirit_bot?start=r{id}
            </div>
          </div>
          <div className="bg-borders w-full px-5 h-[1px] !mt-6"></div>

          <div className="w-full flex flex-col">
            <h3 className="text-[22px] font-semibold pb-[16px]">My Referrals:</h3>

            <div className="w-full flex flex-col space-y-3">

            {loading ? (
        <p className='w-full text-center'>checking...</p>
      ) : referrals.length === 0 ? (
        <p className='text-center w-full now pt-8 px-5 text-[14px] leading-[24px]'>
         You don't have referrals, {username}😭
          </p>
      ) : (
        <>


        
                            {referrals.map((user, index) => (

                              <>

<div
                      key={index}
                      className="bg-cards rounded-[10px] p-[14px] flex flex-wrap justify-between items-center"
                    >
                      <div className="flex flex-1 flex-col space-y-1">
                        <div className="text-[#fff] pl-1 text-[16px] font-semibold">
                        {user.username}
                        </div>

                        <div className="flex items-center space-x-1 text-[14px] text-[#e5e5e5]">
                          <div className="">
                            <img src={user.level.imgUrl} alt="bronze" className="w-[18px]" />
                          </div>
                          <span className="font-medium text-[#9a96a6]">
                          {user.level.name}
                          </span>
                          <span className="bg-[#bdbdbd] w-[1px] h-[13px] mx-2"></span>

                          <span className="w-[20px]">
                            <img
                              src={coinsmall}
                              className="w-full"
                              alt="coin"
                            />
                          </span>
                          <span className="font-normal text-[#ffffff] text-[15px]">
                          {formatNumber(user.balance)}
                          </span>
                        </div>
                      </div>

                      <div className="text-[#ffce68] font-semibold text-[14px]">
                      +{formatNumber(user.balance / 100 * 10)}
                      </div>
                      <div className="flex w-full mt-2 p-[4px] items-center bg-energybar rounded-[10px] border-[1px] border-borders">
                        <div className="h-[10px] rounded-[8px] bg-btn w-[.5%]"></div>
                      </div>
                    </div>

                    </>
                  ))}
</>
                )}

            </div>
          </div>

          <ClaimLeveler claimLevel={claimLevel} setClaimLevel={setClaimLevel} />
        </div>
        <Outlet />
      </Animate>
    </>
      )}
    
    </>
    
  );
};

export default Ref;

а этот выдает 
import React, { useEffect } from "react";
import { Outlet } from "react-router-dom";
import "../App.css";
import "../fire.scss";

import { AnimatePresence } from "framer-motion";
import Footer from "../Components/Footer";
import Header from "../Components/Header";
import {UserProvider, useUser} from "../context/userContext";
import { db } from "../firebase";
import { doc, getDoc } from "firebase/firestore";

const tele = window.Telegram.WebApp;
const Home = () => {
    const { id, username, referrals, loading } = useUser();

    useEffect(() => {
        const handleContextMenu = (event) => event.preventDefault();
        const handleKeyDown = (event) => {
            if (
                (event.ctrlKey && (event.key === "u" || event.key === "s")) ||
                (event.ctrlKey && event.shiftKey && event.key === "i")
            ) {
                event.preventDefault();
            }
        };

        document.addEventListener("contextmenu", handleContextMenu);
        document.addEventListener("keydown", handleKeyDown);

        return () => {
            document.removeEventListener("contextmenu", handleContextMenu);
            document.removeEventListener("keydown", handleKeyDown);
        };
    }, []);

    useEffect(() => {
        tele.ready();
        tele.expand();

        window.Telegram.WebApp.setHeaderColor("#191b33"); // Set header color to red

        // Haptic feedback
        if (tele.HapticFeedback) {
            tele.HapticFeedback.impactOccurred("medium");
        }
    }, []);

    return (
        <>
            <div className='w-full flex justify-center flex-col'>
                <Header />
                <div className='w-full flex justify-center'>
                    <div className='flex flex-col pt-8 space-y-3 w-full'>
                        <UserProvider>
                            <AnimatePresence mode='wait'>
                                <Outlet />
                            </AnimatePresence>
                        </UserProvider>

                        <div
                            id='footermain'
                            className={`flex flex-col bg-background space-y-6 fixed bottom-0 py-6 left-0 right-0 justify-center items-center px-5`}
                        >
                            <Footer />
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
};

export default Home;

Uncaught TypeError: Cannot destructure property 'id' of '(0 , _context_userContext__WEBPACK_IMPORTED_MODULE_5__.useUser)(...)' as it is undefined.
    at Home (Home.js:15:1)
    at renderWithHooks (react-dom.development.js:16175:1)
    at mountIndeterminateComponent (react-dom.development.js:20913:1)
    at beginWork (react-dom.development.js:22416:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
    at invokeGuardedCallback (react-dom.development.js:4274:1)
    at beginWork$1 (react-dom.development.js:27405:1)
    at performUnitOfWork (react-dom.development.js:26513:1)
    at workLoopSync (react-dom.development.js:26422:1)
Home @ Home.js:15
renderWithHooks @ react-dom.development.js:16175
mountIndeterminateComponent @ react-dom.development.js:20913
beginWork @ react-dom.development.js:22416
callCallback @ react-dom.development.js:4161
invokeGuardedCallbackDev @ react-dom.development.js:4210
invokeGuardedCallback @ react-dom.development.js:4274
beginWork$1 @ react-dom.development.js:27405
performUnitOfWork @ react-dom.development.js:26513
workLoopSync @ react-dom.development.js:26422
renderRootSync @ react-dom.development.js:26390
performConcurrentWorkOnRoot @ react-dom.development.js:25694
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 14 more frames
Show less
Home.js:15 Uncaught TypeError: Cannot destructure property 'id' of '(0 , _context_userContext__WEBPACK_IMPORTED_MODULE_5__.useUser)(...)' as it is undefined.
    at Home (Home.js:15:1)
    at renderWithHooks (react-dom.development.js:16175:1)
    at mountIndeterminateComponent (react-dom.development.js:20913:1)
    at beginWork (react-dom.development.js:22416:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
    at invokeGuardedCallback (react-dom.development.js:4274:1)
    at beginWork$1 (react-dom.development.js:27405:1)
    at performUnitOfWork (react-dom.development.js:26513:1)
    at workLoopSync (react-dom.development.js:26422:1)
Home @ Home.js:15
renderWithHooks @ react-dom.development.js:16175
mountIndeterminateComponent @ react-dom.development.js:20913
beginWork @ react-dom.development.js:22416
callCallback @ react-dom.development.js:4161
invokeGuardedCallbackDev @ react-dom.development.js:4210
invokeGuardedCallback @ react-dom.development.js:4274
beginWork$1 @ react-dom.development.js:27405
performUnitOfWork @ react-dom.development.js:26513
workLoopSync @ react-dom.development.js:26422
renderRootSync @ react-dom.development.js:26390
recoverFromConcurrentError @ react-dom.development.js:25806
performConcurrentWorkOnRoot @ react-dom.development.js:25706
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 15 more frames
Show less
react-dom.development.js:18572 The above error occurred in the <Home> component:

    at Home (http://localhost:3000/frontend/static/js/bundle.js:9356:68)
    at RenderedRoute (http://localhost:3000/frontend/static/js/bundle.js:76357:5)
    at RenderErrorBoundary (http://localhost:3000/frontend/static/js/bundle.js:76304:5)
    at DataRoutes (http://localhost:3000/frontend/static/js/bundle.js:74924:5)
    at Router (http://localhost:3000/frontend/static/js/bundle.js:76982:15)
    at RouterProvider (http://localhost:3000/frontend/static/js/bundle.js:74711:5)
    at TonConnectUIProvider (http://localhost:3000/frontend/static/js/bundle.js:99026:7)

React will try to recreate this component tree from scratch using the error boundary you provided, RenderErrorBoundary.
logCapturedError @ react-dom.development.js:18572
callback @ react-dom.development.js:18640
callCallback @ react-dom.development.js:13122
commitUpdateQueue @ react-dom.development.js:13143
commitLayoutEffectOnFiber @ react-dom.development.js:23263
commitLayoutMountEffects_complete @ react-dom.development.js:24578
commitLayoutEffects_begin @ react-dom.development.js:24564
commitLayoutEffects @ react-dom.development.js:24502
commitRootImpl @ react-dom.development.js:26779
commitRoot @ react-dom.development.js:26638
finishConcurrentRender @ react-dom.development.js:25848
performConcurrentWorkOnRoot @ react-dom.development.js:25765
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 15 more frames
Show less
hooks.tsx:630 React Router caught the following error during render TypeError: Cannot destructure property 'id' of '(0 , _context_userContext__WEBPACK_IMPORTED_MODULE_5__.useUser)(...)' as it is undefined.
    at Home (Home.js:15:1)
    at renderWithHooks (react-dom.development.js:16175:1)
    at mountIndeterminateComponent (react-dom.development.js:20913:1)
    at beginWork (react-dom.development.js:22416:1)
    at beginWork$1 (react-dom.development.js:27381:1)
    at performUnitOfWork (react-dom.development.js:26513:1)
    at workLoopSync (react-dom.development.js:26422:1)
    at renderRootSync (react-dom.development.js:26390:1)
    at recoverFromConcurrentError (react-dom.development.js:25806:1)
    at performConcurrentWorkOnRoot (react-dom.development.js:25706:1)