Component does not render, when using Reacts context api – Reactjs

import { UserProvider, useUser } from "./UserContext";

const LoggedInUser = () => {
  const { user } = useUser();

  return (
    <p style={{ textAlign: "right" }}>
      by<span>{user.name}</span>
    </p>
  );
};

const Header = () => {
  return (
    <header>
      <h2 style={{ textAlign: "center" }}>Blog App</h2>
      <LoggedInUser />
    </header>
  );
};
const Page = () => {
  const { user } = useUser();
  return (
    <div style={{ marginLeft: "20px", marginRight: "30px" }}>
      <h2>What is Lorem ipsum</h2>
      <p>
        Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
        enim labore culpa sint ad nisi Lorem pariatur mollit ex esse
        exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit
        nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor
        minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure
        elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor
        Lorem duis laboris cupidatat officia voluptate. Culpa proident
        adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod.
        Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim.
        Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa
        et culpa duis.
      </p>
      <p>Written by {user.name}</p>
    </div>
  );
};

function App() {
  return (
    <div>
      <Header />
      <Page />
    </div>
  );
}

function Root() {
  return (
    <UserProvider>
      <App />
    </UserProvider>
  );
}

export default Root;

This is my App.jsx

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

const UserContext = createContext({});

export const UserProvider = ({ children }) => {
  const [user] = useState({
    name: "John",
    email: "[email protected]",
    dob: "01/01/2000",
  });
  return <UserContext.Provider value={{ user }}></UserContext.Provider>;
};

export const useUser = () => useContext(UserContext);

This is my UserContext.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import Root from "./App";
import { UserProvider } from "./UserContext";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Root />
  </React.StrictMode>
);

This my index.js

But for some reason the website isn’t rendering any content whatsoever. Like it just shows a blank white page. Even the console shows no errors. Could someone explain why this is happening? And how do I fix this?

‏‏‎ ‎

‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎