Estou com problema para return do Topo No index.js do Produtor?

Meu componete no index.js do Produtor:

import React from 'react';
import { useRoute } from '@react-navigation/native';
import useTextos from '../../hooks/useTextos';

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

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

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

export default function Produtor() {
  const route = useRoute();
  const { tituloProdutor, tituloCestas } = useTextos();
  const { nome, imagem, cestas } = route.params;

  const TopoLista = () => {
    return (
      <>
        <Topo titulo={tituloProdutor} imagem={topo} altura={150} />
        <View style={styles.conteudo}>
          <View style={styles.logo}>
            <Image source={imagem} style={styles.produtorImage} />
            <Text style={styles.produtor}>{nome}</Text>
          </View>

          <Text style={styles.cestas}>{tituloCestas}</Text>
        </View>
      </>
    );
  };

  return (
    <FlatList
      ListHeaderComponent={TopoLista}
      data={cestas}
      renderItem={({ item }) => <Cesta {...item} produtor={{ nome, imagem }} />}
      style={styles.lista}
    />
  );
}

const styles = StyleSheet.create({
  lista: {
    backgroundColor: '#ffffff',
  },
  conteudo: {
    paddingHorizontal: 16,
  },
  logo: {
    flexDirection: 'row',
  },
  produtorImage: {
    width: 62,
    height: 62,

    marginTop: -23,

    borderRadius: 6,
  },
  produtor: {
    color: '#464646',
    fontSize: 20,
    lineHeight: 32,
    fontWeight: 'bold',
    marginLeft: 16,
  },
  cestas: {
    color: '#464646',
    fontSize: 20,
    lineHeight: 32,
    fontWeight: 'bold',
    marginTop: 32,
  },
});

Meu componente Topo está assim:

import React from 'react';
import { useNavigation } from '@react-navigation/native';
import { Image, StyleSheet, Dimensions, TouchableOpacity } from 'react-native';

import Texto from './Texto';

import Gradiente from '../assets/gradiente.svg';
import topo from '../assets/topo.png';
import VoltarSVG from '../assets/voltar.svg';

const largura = Dimensions.get('screen').width;
const ALTURA_PADRAO = 270;

export default function Topo({
  titulo,
  imagem = topo,
  altura = ALTURA_PADRAO,
}) {
  const navigation = useNavigation();
  const estilos = funcaoEstilos(altura);
  return (
    <>
      <Image source={imagem} style={estilos.topo} />
      <Gradiente
        width={largura}
        height={(130 / 360) * largura}
        style={estilos.gradiente}
      />
      <Texto style={estilos.titulo}>{titulo}</Texto>
      <TouchableOpacity
        onPress={() => {
          navigation.goBack();
        }}
        style={estilos.botaoVoltar}>
        <VoltarSVG color="white" style={estilos.voltar} />
      </TouchableOpacity>
    </>
  );
}

const funcaoEstilos = altura =>
  StyleSheet.create({
    topo: {
      width: '100%',
      height: altura,
    },
    gradiente: {
      position: 'absolute',
    },
    titulo: {
      width: '100%',
      position: 'absolute',
      textAlign: 'center',
      fontSize: 16,
      lineHeight: 26,
      color: 'white',
      fontWeight: 'bold',
      padding: 16,
    },
    botaoVoltar: {
      position: 'absolute',
      padding: 17,
    },
    voltar: {
      width: 24,
      height: 24,
    },
  });

Meu repositório : https://github.com/MiguelASFerreira/rnnavegacao