React context : state flow broken from Provider to Consumer - reactjs

Question

I want to try to transfer the record from state through several components using Consumer and Provider. I have a value in the ShoppingBasketProvider component that I want to pass to the ShoppingBasket component, but at this point it doesn't output anything and equals undefined. Tell me what I'm doing wrong.
I have next components:
ShoppingBasketContext:
import React, { Component, PureComponent } from "react";
export const ShoppingBasketContext = React.createContext();
export default class ShoppingBasketProvider extends Component {
state = {
shoppingBasketItems: 11
}
render() {
return (
<ShoppingBasketContext.Provider shoppingBasketItems={ this.state.shoppingBasketItems }>
{this.props.children}
</ShoppingBasketContext.Provider>
)
}
}
app:
import React, {PureComponent} from 'react'
import './App.scss';
import Shop from '../../page/shop/shop.js'
import AboutUs from '../../page/aboutUs/aboutUs.js'
import Menu from '../menu/menu.js'
import ShoppingBasketProvider from '../shoppingBasketProvider/shoppingBasketProvider.js'
import { BrowserRouter, Switch, Route, Redirect, Router } from "react-router-dom";
export default class App extends PureComponent {
render() {
return (
<main>
<ShoppingBasketProvider>
<BrowserRouter>
<Menu />
<Switch>
<Route path="/" exact children={<Shop />} />
<Route path="/aboutus" children={<AboutUs />} />
<Redirect to="/" />
</Switch>
</BrowserRouter>
</ShoppingBasketProvider>
</main>
);
}
}
ShoppingBasket:
import React, {PureComponent} from 'react'
import { ShoppingBasketContext } from '../shoppingBasketProvider/shoppingBasketProvider.js';
export default class ShoppingBasket extends PureComponent {
render() {
return (
<div>
<ShoppingBasketContext.Consumer>
{shoppingBasketItems => (
<React.Fragment>
Shopping cart: <span>{shoppingBasketItems}</span>
</React.Fragment>
)}
</ShoppingBasketContext.Consumer>
</div>
)
}
}

Answer 1

The prop you pass to the provider must be called value. See suggested change below
return (
<ShoppingBasketContext.Provider value={ this.state.shoppingBasketItems }>
{this.props.children}
</ShoppingBasketContext.Provider>
)