React context.provider doesn't change the default value

Question

I'm using react context. First I give to the context default value, and then I give to Context.Provider different value. but the consumer still get the default value

HOC that pass notifications (for now is just a simple string)

export const NotificationContext = React.createContext<string>('default');

function withNotifications<T>(WrappedComponent: React.ComponentType<T>) {

    return class ComponentWithTheme extends React.Component<T, { data: any }> {
        public render() {
            return (
                <NotificationContext.Provider value={'value'}>
                    <WrappedComponent {...this.props as T} />
                </NotificationContext.Provider>
            );
        }
    };
}

export default withNotifications;

Consumer

const Topbar: React.FC<TopbarProps> = props => {
    //const [isNotificationOpen, setIsNotificationOpen] = useState(false);
    //const [unreadCount, setUnreadCount] = useState(0);

    const notificationContext = useContext(NotificationContext);
    useEffect(() => {
        console.log(notificationContext);
    }, Object.values(notificationContext));

    console.log(notificationContext);


    return (
        <div>topBar</div>  );
};
export default Topbar;

I'm still get the "default" string and not the "value"

Answer 1

Your value to the provider should be an object,

const value = {
 name: "kim"
}
 <NotificationContext.Provider value={value}>
  <WrappedComponent {...this.props as T} />
 </NotificationContext.Provider>