Duvida com a desconstrução do objeto, ao tentar usar TS

Estou tentando fazer o curso com TypeScript, mas estou tendo muita dificuldade na hora de passar o "mock" tentando remover a camada externa do objeto pra passar cada parametro separadamente. Alguém poderia me ajudar?

App.tsx:

import mock from './src/mocks/basket';
<Basket {...mock}/>

mocks/basket.tsx:

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

const mock : Object = {
    top:{
        title: 'Detalhes da Cesta de Verduras',
    },
    details: {
        name: 'Cesta de Verduras',
        farmLogo: logo,
        farmName: 'Jenny Jack Farm',
        description: 'Descrição aleatoria do texto aqui, pode imaginar qualquer coisa',
        price: 'R$ 40,00',
    }
}

export default mock;

screens/Basket/index.tsx:

interface Props{
    top: { title: string};
    details: {
        name: string,
        farmLogo: any,
        farmName: string,
        description: string,
        price: string,
    };
}

export default function Basket ({top, details} : Props) {
    return(
        <>
            <Top {...top}/>
            <View style={styles.basket}>
                <Details {...details}/>
            </View>

screens/Basket/components/Details.tsx:

interface Props{
name: string,
farmLogo: any,
farmName: string,
description: string,
price: string,
}
export default function Details({name, farmLogo, farmName, description, price} : Props){
return (
    <>
    <Texts style={styles.name}>{name}</Texts>
    <View style={styles.farm}>
        <Image source={farmLogo} style={styles.farmLogo}/>
        <Texts style={styles.farmName}>{farmName}</Texts>                    
    </View>
    <Texts style={styles.description}>{description}</Texts>
    <Texts style={styles.price}>{price}</Texts>
    </>
)
}