Как сделать динамическую навигацию для каждого отдельного объекта массива?

Я новичок в react-native, прошу вас помочь мне с небольшой задачей. У меня есть отдельный файл с массивом, который я итерирую в компоненте Boxes. Мне приходят разные поля, однако ключевое поле, которое я получаю – id. Я использую react-native navigation. Мне нужно чтобы при кнопке details, я переходил на отдельную компоненту BoxesDetails, однако внизу отдельного таба Details не должно быть. Пожалуйста, помогите мне реализовать это. Спасибо вам большое

Boxes.js

import {Button, FlatList, StyleSheet, Text, View} from 'react-native';
import {arrayOfBoxes} from "../array/arrayOfBoxes";
import {useState} from "react";

const Boxes = () => {

   const [autoBoxes, setAutoBoxes] = useState(arrayOfBoxes

   return (<View>
     <FlatList data={autoBoxes} renderItem={({item}) => 
   return <View>
     <Text>{item.id}</Text>
     <Button title={'Details'} onPress={() => {}}/>
         </View> }}/>

   </View>)
}

export default Boxes;

App.js

const Tab = createBottomTabNavigator();
 export default function App() {
 return ( <NavigationContainer>
   <Tab.Navigator>
     <Tab.Screen name={'Boxes'} component={Boxes}/>
     <Tab.Screen name={'Vaucums'} component={VacuumCleaner}/>
   </Tab.Navigator>
         </NavigationContainer>);
}

BoxesDetailsComponent.ts

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

const BoxesDetailsComponent = () => {
 return (<View>
     <Text>Hello Box Details</Text>
 </View>)
}

export default BoxesDetailsComponent;