Context API React

Mam problem z odczytaniem poprawnej wartości z Providera (Context API). Mój provider wygląda następująco, początkowa wersja była taka, że zmieniałem wartość providera tylko wtedy kiedy komponent zostanie wyrenderowany. Dodałem metode, która po kliknięciu zmienia stan komponentu i myślałem, że wartość providera zostanie również zmieniona. Zmienianie stanu działa (dodałem parę console logów, żeby się upewnić) a wartość, która odczytuje, Consumer jest wartośćią domyślną/nie zmienia się. Dodam, że w moim przypadku Consumer jest parentem i renderuję się dużo wcześniej niż Provider. Wygląda to tak, że Aplikacja się renderuję, zaczytuję domyślna wartość z contextu (0), a przy zmianie wartości ta wartość nie jest przekazywana.

Provider

             export const NavigationWordContext = React.createContext(0);


            <NavigationWordContext.Provider value={this.state.NUM_OF_WORDS}>
                <div id={this.props.id} className={this.props.className} style={style} onClick={this.handleClick}>
                </div>
            </NavigationWordContext.Provider>

Consumer

        <NavigationWordContext.Consumer>
            {value =>
                (<Wrapper>
                    <span id={"complete"} style={completeStyle}>1 / {value}</span>
                </Wrapper>)}
        </NavigationWordContext.Consumer>