вот Header.js

import React from "react";
import { NavLink } from "react-router-dom";
import { db } from "../firebase";
import { doc, getDoc } from "firebase/firestore";

import { ReactComponent as UserIcon } from "../images/icons/user.svg";
import LevelIcon from "../images/icons/LvlIcon";

const Header = () => {
    return (
        <section className='w-full flex items-center justify-between align-middle h-[80px] bg-cards flex-row gap-8 px-5 py-2'>
            <NavLink to='/'>
                <div className='flex items-center justify-between align-middle text-white py-1 px-2 rounded-md bg-background2 gap-2 pr-8 relative h-[36px] shadow-[0px_4px_4px_0px_#00000040]'>
                    <UserIcon />
                    <span className='font-Inter text-18.5 font-semibold text-left'>
                        sch1z0o
                    </span>
                    <span className=' text-primary bg-background2 rounded-full absolute right-[-27px] top-[-10px] shadow-[0px_4px_4px_0px_#00000040]'>
                        <LevelIcon level={5} className='text-primary' />
                    </span>
                </div>
            </NavLink>
            <NavLink to='/connect'>
                <div className='flex items-center justify-between align-middle text-white py-1 px-2 rounded-md bg-background2 gap-2 h-[36px] shadow-[0px_4px_4px_0px_#00000040]'>
                    <span className='font-Inter text-18.5 font-semibold text-left'>
                        Claim
                    </span>
                    <UserIcon />
                </div>
            </NavLink>
        </section>
    );
};

export default Header;

вот collection из firestore:
Document ID	balance	battery	energy	firstName	freeGuru	fullTank	lastName	level	refBonus	refereeId	referrals	tapBalance	tapValue	timeRefill	timeSta	timeStaTank	totalBalance	userId	username
381700637	9999	{level: 1, energy: 500}	500	"Ziper"	3	3	"Lin"	{name: "Warm", imgUrl: "/warm.webp", imgTap: "/coin-1.webp", imgBoost: "/coins-1.webp", id: 1}	0	null	[]	0	{value: 1, level: 1}	{level: 1, step: 600, duration: 10}	null	null	"00"	"381700637"	"ziperlin"

я хочу чтобы в Header отображалось имя пользователя, который использует приложение. Т.е. не sch1z0o, а Ziper Lin

вот для примера отрывок из App.js, чтобы ты понял как установить активного пользователя

function App() {
  const { energy, setEnergy, displayEnergy, setDisplayEnergy, idme, setIdme, count, setCount } = useContext(EnergyContext);
    // eslint-disable-next-line
  const [username, setUsername] = useState("");
    // eslint-disable-next-line
  const [name, setName] = useState("");
  const imageRef = useRef(null);
  const [clicks, setClicks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showLevels, setShowLevels] = useState(false);

  const levelsAction = () => {
    setShowLevels(true);
    document.getElementById("footermain").style.zIndex = "50";
  };

  const handleClick = (e) => {
    if (energy > 0) {
      const { offsetX, offsetY, target } = e.nativeEvent;
      const { clientWidth, clientHeight } = target;

      const horizontalMidpoint = clientWidth / 2;
      const verticalMidpoint = clientHeight / 2;

      const animationClass =
        offsetX < horizontalMidpoint
          ? "wobble-left"
          : offsetX > horizontalMidpoint
          ? "wobble-right"
          : offsetY < verticalMidpoint
          ? "wobble-top"
          : "wobble-bottom";

      // Remove previous animations
      imageRef.current.classList.remove(
        "wobble-top",
        "wobble-bottom",
        "wobble-left",
        "wobble-right"
      );

      // Add the new animation class
      imageRef.current.classList.add(animationClass);

      // Remove the animation class after animation ends to allow re-animation on the same side
      setTimeout(() => {
        imageRef.current.classList.remove(animationClass);
      }, 500); // duration should match the animation duration in CSS

      // Increment the count
      const rect = e.target.getBoundingClientRect();
      const newClick = {
        id: Date.now(), // Unique identifier
        x: e.clientX - rect.left,
        y: e.clientY - rect.top,
      };

      const updatedCount = count + 2; // Increment count by 5
      const updatedEnergy = energy - 2;

      setClicks((prevClicks) => [...prevClicks, newClick]);
      setCount(updatedCount);
      setEnergy(updatedEnergy);
      setDisplayEnergy(updatedEnergy); // Update display energy

      updateUserStatsInFirestore(idme, updatedCount, updatedEnergy);

      // Remove the click after the animation duration
      setTimeout(() => {
        setClicks((prevClicks) =>
          prevClicks.filter((click) => click.id !== newClick.id)
        );
      }, 1000); // Match this duration with the animation duration
    }
  };

  useEffect(() => {
    // Fetch username and user ID from Telegram Web App context
    const telegramName =
      window.Telegram.WebApp.initDataUnsafe?.user?.first_name;
    const telegramLastName =
      window.Telegram.WebApp.initDataUnsafe?.user?.last_name;
    const telegramUsername =
      window.Telegram.WebApp.initDataUnsafe?.user?.username;
    const telegramUserid = window.Telegram.WebApp.initDataUnsafe?.user?.id;

    if (telegramName) {
      setName(telegramName + " " + telegramLastName);
    }

    if (telegramUsername) {
      setUsername(telegramUsername);
    }
    if (telegramUserid) {
      setIdme(telegramUserid);
    }

    if (telegramUsername && telegramUserid) {
      saveRefereeIdToFirestore();
    }

    // Fetch count and energy from Firestore when component mounts
    if (telegramUserid) {
      fetchUserStatsFromFirestore(telegramUserid)
        .then((userStats) => {
          if (isNaN(userStats.count)) {
            setCount(0);
            updateUserStatsInFirestore(telegramUserid, 0, 500);
          } else {
            setCount(userStats.count);
            setEnergy(userStats.energy);
            setDisplayEnergy(userStats.energy); // Update display energy
          }
          setLoading(false); // Set loading to false after fetching count
        })
        .catch(() => {
          setCount(0); // Set count to 0 if fetching fails
          setEnergy(500); // Set energy to 500 if fetching fails
          setLoading(false);
        });
    }
    // eslint-disable-next-line
  }, []);