Sharing State Using React Context

[andito]

I am taking the intermediate React course. In the Global State Management section I could not get the useContext working as Mosh explains in the chapter 5: Sharing State Using React Context.

function App() {
  const [tasks, dispatch] = useReducer(tasksReducer, []);

  return (
    <TasksContext.Provider value={{ tasks, dispatch }}>
      <NavBar />
      <HomePage />
    </TasksContext.Provider>
  );
}
 

This is the UI I am getting instead of the AddTask button and the Counter

Can someone let me know why I am not getting the AddTask button?