Javascript 使用上下文API和useContext传递值（React js）

我想传递我在Login.jsx组件中声明的customerFlag的值，并想在Header.jsx中访问该值。我正在使用上下文API和使用上下文。基本上这里我在两个组件之间传递值，你们可以说是兄弟组件。但是问题是我在UserContext.Provider value={customerFlag}标记下得到的customerFlag值是未定义的。如果我做错了，请纠正我。我是英语初学者

Login.jsx

import React, { createContext } from 'react';

      //Creating Context API
        const UserContext = createContext(null);
        .
        .
        .
        } else {
    
                 customerFlag='customer';
                 window.alert('Login successfull');
                 history.push('/home');
    
                }

return (
        <>
            
            {/* Providing the context to Header*/}

            <UserContext.Provider value={customerFlag} >
                <Header />
            </UserContext.Provider>

        </>
        )

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

const Header = () => {
    
    const context = useContext(UserContext)
    console.log(context);

return ();
}

---

customerFlag='customer'在React组件的生命周期中未知。这意味着如果
customerFlag
稍后更改，您的上下文将不会注意到

您需要使用状态作为客户标志。e、 g:

const [cusomterFlag, setCustomerFlag] = useState('');

// ...

if(...) {
  // ...
} else {
  setCustomerFlag('customer');
  window.alert('Login successfull');
  history.push('/home');
}