React native – change selected tab when navigate to the screen

i am building react native application and i have 2 screens on my app right now.

Home:

import { StyleSheet, Text, View, Button } from 'react-native';
import {StackScreens} from '../routes/MyStack'
import {NativeStackScreenProps} from '@react-navigation/native-stack'

type homePropsType = NativeStackScreenProps<StackScreens, 'Home'>;

export const Home = (props : homePropsType) => {
    const {navigation} = props;

    const goToProfile =() =>{
    navigation.navigate('Profile'); 
}

  return (
    <View style={styles.container}>
      <Text>
        HOME!
      </Text>

      <Button title='profile' color="blue" onPress={goToProfile}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Profile:

import { StyleSheet, Text, View ,Button } from 'react-native';
import {StackScreens} from '../routes/MyStack'
import {NativeStackScreenProps} from '@react-navigation/native-stack'

type profilePropsType = NativeStackScreenProps<StackScreens, 'Profile'>;

export const Profile = (props: profilePropsType) => {

    const {navigation, route} = props;

    const goToHome =() =>{
        navigation.navigate('Home'); 
    }

  return (
    <View style={styles.container}>
      <Text>
        profile
      </Text>

      <Button title='home' color="blue" onPress={goToHome}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

MyStack:

import { createNativeStackNavigator } from "@react-navigation/native-stack";
import {Home} from "../screens/Home";
import {Profile} from "../screens/Profile";


export type StackScreens = {
  Home : undefined,
  Profile : undefined
}

const Stack = createNativeStackNavigator<StackScreens>();

export const MyStack = (props: any) => (
  <Stack.Navigator screenOptions={{ title: "", headerShown: false }} >
    <Stack.Screen name="Home" component={Home} />
    <Stack.Screen name="Profile" component={Profile} />
  </Stack.Navigator>
);

MyTab:

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; 
import {Home} from "../screens/Home";
import {Profile} from "../screens/Profile";
import { MyStack } from "./MyStack";
import { Icon } from "react-native-elements";

export type TabScreens = {
  Home : undefined,
  Profile : undefined,
  MyStack : undefined
}


const Tab = createBottomTabNavigator<TabScreens>();

export const MyTab = (props: any) => (
 <Tab.Navigator initialRouteName="MyStack" screenOptions={{
    tabBarStyle:{backgroundColor:"blue"},
    tabBarActiveTintColor:"white",
   headerShown:false,
 }}>
    <Tab.Screen name="MyStack" component={MyStack} options={{tabBarLabel:"home", tabBarIcon:        ({color}) =>(
        <Icon color={color} name="home" type="font-awesome" />)}}/>
    <Tab.Screen name="Profile" component={Profile} options={{ tabBarIcon:({color}) =>(
        <Icon color={color} name="user" type="font-awesome" />)}}/>
 </Tab.Navigator>
);

Now i can navigate between the to screens with MyStack by press the button on each screen or with MyTab by press on one of the tabs.
My problem is that i want that when i navigate to the profile screen for example the profile tab will be the one that selected. right now if i perss the button to navigate to the profile screen i will navigate to him but the tab will stay on home.
Is there a way to fix this or that should be like that?