Help me understand Context API preferably with Hooks

JavaScript
1

So trying to understand the Context stuff so took this code and guide from here: https://www.taniarascia.com/using-context-api-in-react/

So i have App that i have function (component) Navbar i’m trying to pass data to it from App. Issue is that i cant pass data to Navbar but i can pass it to HomePage, i’m guessing that the either i need to create Navbar separate component and then import it or store all data in Context.jsx file?

This is not live project or something i’m just playing around and trying different things so i can have better understanding how this works.

Here is my code:
App

import React, { useContext } from 'react';
import UserContext from './Context';
import { UserProvider } from './Context';
import HomePage from './HomePage';

function Navbar() {
  const { user } = useContext(UserContext);
  console.log(user);
  return <div>{user}</div>;
}

export default function App() {
  const user = {
    name: 'Tania',
    loggedIn: true
  };

  return (
    <UserProvider value={user}>
      <Navbar />
      {/* <HomePage /> */}
    </UserProvider>
  );
}

Context

import React from 'react';

const UserContext = React.createContext();

export const UserProvider = UserContext.Provider;
export const UserConsumer = UserContext.Consumer;
export default UserContext;

HomePage

import React, { useContext } from 'react';
import UserContext from './Context';

export default function HomePage() {
  const user = useContext(UserContext);
  console.log(user);
  return <div>Test</div>;
}

How do i need to amend Context file to store the data so that i can pass it from there? The provider/consumer stuff confuses me and i get lost on how i need to name the function in Context.