Não estou conseguindo validar as informaçõe passado pelo vídeo

Boa noite,

Tentei reproduzir o que foi passado no vídeo e ocorreu o erro quando fui validar no Expo Go no celular mobile, segue em anexo o meu código:

Apps.js:

import React from 'react';
import { StatusBar, SafeAreaView, View } from 'react-native';
import { 
  useFonts, 
  Montserrat_400Regular, 
  Montserrat_700Bold, 
} from '@expo-google-fonts/montserrat';

import Cesta from './src/telas/Cesta';
import mocks from './src/mocks/cesta'

export default function App() {
  const [fonteCarregada] = useFonts({
    "MontserratRegular": Montserrat_400Regular,
    "MontserratBold": Montserrat_700Bold,
  });

  if(!fonteCarregada) {
    return <View />
  }

  return (
      <SafeAreaView>
        <StatusBar />
        <Cesta {...mocks } />
      </SafeAreaView>

  );
}

index.js:

import React from 'react';
import { StyleSheet, Image, Dimensions, Text, View } from 'react-native';


import Topo from './componentes/Topo';
import Detalhes from '../../componentes/Detalhes';

import topo from '../../../assets/topo.png';





export default function Cesta({ topo, detalhes}) {
    return <>
    <Topo {...topo} />

    <View style = {estilos.cesta}>
        <Detalhes {...detalhes } />

    </View>
    </>
}

const estilos = StyleSheet.create({

    cesta: {
        paddingVertical: 8,
        paddingHorizontal: 16,
    },



});

cesta.js:

import logo from '../../assets/logo.png';

const cesta = {
    topo: {
        titulo: "Detalhes da cesta",
    },
    detalhes: {
        nome: "Cesta de Verduras",
        logoFazenda: logo,
        nomeFazenda: "Jenny Jack farm",
        descricao: "Uma cesta com produtos selecionados cuidadosamente da fazenda direto para sua cozinha",
        preco: "R$ 40,00",
    }
}

export default cesta;

Detalhes.js:

import React from 'react';
import { Image, StyleSheet, View } from 'react-native';

import Texto from '../componentes/Texto';

export default function Detalhes({nome, logoFazenda, nomeFazenda, descricao, preco }) {
    return <>
    <Texto style = {estilos.nome}>{ nome }</Texto>
            <View style = {estilos.fazenda}>
            <Image source = {logoFazenda} style = { estilos.imageFazenda } />
            <Texto style = {estilos.nomeFazenda}>{ nomeFazenda }</Texto>

            </View>

            <Texto style = {estilos.descricao}>{descricao}</Texto>
            <Text style = {estilos.preco}>{ preco }</Text>
    </>

    const estilos = StyleSheet.create({
        nome: {
            color: "#464646",
            fontSize: 26,
            lineHeight: 42,
            fontWeight: "bold"
        },

        fazenda: {
            flexDirection: "row",
            paddingVertical: 12,
        },

        imageFazenda: {
            width: 32,
            height: 32,
            marginLeft: 12,
        },

        nomeFazenda: {
            fontSize: 16,
            lineHeight: 26,

        },

        descricao: {
            color: "#A3A3A3",
            fontSize: 16,
            lineHeight: 26,
        },

        preco: {
            color: "#2A9F85",
            fontWeight: "bold",
            fontSize: 26,
            lineHeight: 42,
            marginTop: 8,
        }
    })

}

Topo.js:

import React from 'react';
import { Image, StyleSheet, Dimensions } from 'react-native';

import Texto from '../../../componentes/Texto';
import topo from '../../../../assets/topo.png';

const width = Dimensions.get('screen').width;

export default function Topo( { titulo}) {
    return<>
    <Image source = {topo} style = {estilos.topo} />
    <Texto style = {estilos.titulo}>{ titulo }</Texto>
    </>
}

const estilos = StyleSheet.create({
    topo: {
        width: "100%",
        height: 578 / 700 * width,
        fontFamily: "Montserrat"
    },
    titulo: {
        width: "100%",
        position: "absolute",
        textAlign: "center",
        fontSize: 16,
        lineHeight: 26,
        color: "white",
        fontWeight:"bold",
        padding: 16
    },
})

Texto.js:

import React from 'react';
import { StyleSheet, Text } from 'react-native';

export default function Texto({ children,style }) {
    let estilo = estilos.texto;

    if(style?.fontWeigth === 'bold') {
        estilo = estilos.textoNegrito;
    }
    return <Text style= {[style, estilos.texto]}>{ children }</Text>
}

const estilos = StyleSheet.create({
    texto: {
        fontFamily:"MontserratRegular",
        fonteWeigth: "normal"

    },

    textoNegrito: {
        fontFamily: "MontserratBold",
        fonteWeigth: "normal"
    }
});