Im trying to pass and update a state with useContext;

App.js

import Home from './components/Home'

const UserContext = createContext();



function App() {

  const [name, setName] = useState('Name');



  return (

      <UserContext.Provider value={{name, setName}}>

        <Home/>

      </UserContext.Provider>

  );

}



export default App;

Home.js

import UserContext from '../../App'



function Home() {

    const user = useContext(UserContext);



    return (

        <>

        <label>Your name:</label>

        <input type='text' onChange={e => user.setName(e.target.value)} />

        <p>{user.name}</p>

        </>

    )

}



export default Home;

Im getting this error

TypeError: Cannot read properties of undefined (reading 'name');

How is the correct way to pass state between components with useContext?