Use Context API --react

Question

Component 1:

import "./styles.css";
import { useState, useEffect, createContext } from "react";
import { Component2 } from "./Component2.js";

 export const userContext = createContext();
 export default function App() {
 const [user, setUser] = useState("vk1");

 
return (
<div className="App">
  <userContext.provider value={{ user, setUser }}>
    <Component2 />
  </userContext.provider>
</div>
);
}

Component 2:

import React from "react";
import { useContext } from "react";
import userContext from "./App";

const Component2 = () => {
const { user, setUser } = useContext(userContext);
setUser("vkk");
return <h1>Hi i am from {user} component2</h1>;
};

export default Component2;

Component 3:

import React from "react";
import { useContext } from "react";
import  userContext from "./App";

const Component3 = () => {
const { user, setUser } = useContext(userContext);
setUser("vk");
return <h2>I am from {user} component3</h2>;
};

export default Component3;

Was expecting the state should be shared between the component but was getting the below error.

The element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of App.

Answer 1

Import is wrong

change -> this import { Component2 } from "./Component2.js" to this => import Component2 from "./Component2.js"

As well as You have given incorrect words provider as userContext.provider - it is "Provider"