Потребитель не читает значение провайдера

Question

Это мой компонент провайдера

import React, {useState} from 'react';
import MyComponent from './MyComponent/MyComponent';

     export default function App(props) {
    const [header, setHeader] = useState(null);

    function setHeaderText(header) {
        setHeader(header);
    }

    const contextItems = {
        setHeaderText: setHeaderText,
        what: 'what'
    };

    return <React.Fragment>
        <AppContext.Provider value={contextItems}>
            <MyComponent request={props.request}/>
        </AppContext.Provider>
    </React.Fragment>

}

export const AppContext = React.createContext({
    setHeaderText: () => {},
    what: ''
});

Я использую потребителя, чтобы попытаться передать значение контекста в MyComponent, который является функциональным компонентом.

function MyComponent() {...}

export default (props) => {
    return <AppContext.Consumer>
        { value => <MyComponent context={value} {...props} />}
    </AppContext.Consumer>
}

Моя проблема заключается в том, чтоон только передает значение AppContext по умолчанию, а не значение, которое я передаю.

Может кто-нибудь увидеть что-то не так с моим кодом вообще?

Я использую последнюю версию реакции 16.8.2.

Спасибо за любую помощь.

Примечание: я знаю, что я мог бы просто использовать композицию в этом случае, но значение заголовка будет использоваться во всем приложении.