React Native: Design System no seu app: ERROR TypeError: undefined is not an object (evaluating 'Context._context')

Boa noite, estou fazendo o curso "React Native: Design System no seu app" e estou com o seguinte erro: ERROR TypeError: undefined is not an object (evaluating 'Context._context')

Alguém consegue me ajudar ? Pois não achei uma solução ..

ERROR TypeError: undefined is not an object (evaluating 'Context._context')

This error is located at: in Sacola (at Cabecalho/index.js:13) in RCTView (at View.js:32) in Unknown (at Cabecalho/index.js:9) in Cabecalho (at ListaProdutos/index.js:16)

Segue os fontes em que o erro persiste:

index.js do componente Sacola:

import React, { useContext } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { FONT_FAMILY_SEMI_BOLD, RED, WHITE } from '../../../../styles/styles';
import { DataContext } from '../../../../provider';

export const Sacola = () => {
    const navigation = useNavigation();
    const { itensCheckout } = useContext(DataContext);

    return (
        <TouchableOpacity onPress={() => navigation.push('Checkout')}>
            <View style={styles.containerSacola}>
                <Image
                    source={require('../../../../assets/images/icone-sacola.png')}
                    style={styles.imagem}
                />
                {itensCheckout.length > 0 ? (<View style={styles.containerQuantidade}>
                    <Text style={styles.textoQuantidade}>7</Text>
                </View>) : null}
            </View>
        </TouchableOpacity>
    );
};

const styles = StyleSheet.create({

    containerSacola: {
        backgroundColor: WHITE,
        padding: 18,
        borderRadius: 30,
    },
    imagem: {
        height: 30,
        width: 30,
    },
    containerQuantidade: {
        backgroundColor: RED,
        borderRadius: 100,
        marginTop: -22,
        marginLeft: 11
    },
    textoQuantidade: {
        textAlign: 'center',
        padding: 4,
        fontSize: 10,
        fontFamily: FONT_FAMILY_SEMI_BOLD,
        color: WHITE
    }

})

index.js do provider:

import React, { useState } from 'react';
const DataContext = React.createContext();

const Provider = ({ children }) => {
    const [itensCheckout, setItensCheckout] = useState([]);
    return (
        <DataContext.Provider
            value={{
                itensCheckout,
                adicionarItem: (novoItem) => {
                    let copiaItensCheckout = [...itensCheckout];
                    let itemFiltrado = copiaItensCheckout.find((item) => item.id == novoItem.id,);

                    if (itemFiltrado) {
                        itemFiltrado.quantidade = itemFiltrado.quantidade + 1;
                    } else {
                        item.quantidade = 1;
                        copiaItensCheckout = [...copiaItensCheckout, novoItem];
                    }
                    setItensCheckout(copiaItensCheckout);
                },
            }}>
            {children}
        </DataContext.Provider>
    );
};

export default Provider;