There are two ways you can achieve this

1.) Set options On the Screen itself

You can use the useLayoutEffect hook to achieve this

On the screen where you want to put this header, i.e., the Profile screen just add the following code

React.useLayoutEffect(() => {
  navigation.setOptions({
    headerLeft: () => (
      <Ionicons
        name="arrow-back-sharp"
        size={22}
        color="white"
        style={{ marginRight: 7, marginTop: 1, marginLeft: 3 }}
        onPress={() => navigation.goBack()}
        // make sure you destructure the navigation variable from the props
        // or otherwise you'll have to write it like this
        // onPress={() => props.navigation.goBack()}
      />
    ),
  });
}, [navigation]);

And your Navigation Container should look like

<NavigationContainer>
  <Stack.Navigator screenOptions={{}}>
    <Stack.Screen name="home" component={Home} />
    <Stack.Screen
      name="MyProfile"
      component={Profile}
      options={{
        headerTintColor: 'white',
        title: 'My Profile',
        headerTransparent: true,
        headerShadowVisible: false,
      }}
    />
  </Stack.Navigator>
  <ModalPortal />
</NavigationContainer>;

Have a look at the Working Example Here

2.) Set the headerLeft and headerRight props in the Navigation Container

Setting the properties in the NavigationContainer, like this

<NavigationContainer>
  <Stack.Navigator screenOptions={{}}>
    <Stack.Screen name="home" component={Home} />
    <Stack.Screen
      name="MyProfile"
      component={Profile}
      options={({ navigation, route }) => ({
        headerTintColor: 'white',
        title: 'My Profile',
        headerTransparent: true,
        headerShadowVisible: false,
        headerRight: () => (
          <TouchableOpacity>
            <DrawerIcon size={30} color={'white'} name="md-reorder-two-sharp" />
          </TouchableOpacity>
        ),
        headerLeft: () => (
          <TouchableOpacity onPress={() => navigation.goBack()}>
            <Ionicons
              name="arrow-back-sharp"
              size={22}
              color="white"
              style={{ marginRight: 7, marginTop: 1, marginLeft: 3 }}
            />
          </TouchableOpacity>
        ),
      })}
    />
  </Stack.Navigator>
  <ModalPortal />
</NavigationContainer>

Have a look at the Working Example Here

You have provided a TouchableOpacity as the back button but you haven't specified any onPress callback. You should provide an onPress callback to your TouchableOpacity.

<NavigationContainer>
  <Stack.Navigator screenOptions={{}}>
    <Stack.Screen name='home' component={Home} />
    <Stack.Screen 
      name='MyProfile'
      component={Profile} 
      options={({ navigation, route }) => ({
        headerTintColor: 'white',
        title: 'My Profile',
        headerTransparent: true,
        headerShadowVisible: false,
        headerRight: () => (
          <TouchableOpacity>
            <DrawerIcon size={30} color={'white'} name='md-reorder-two-sharp' />
          </TouchableOpacity>
        ),
        headerLeft: () => (
          <TouchableOpacity onPress={()=> navigation.goBack()}>
            <Ionicons name="arrow-back-sharp" size={22} color="white" style={{ marginRight: 7, marginTop: 1, marginLeft: 3 }} />
          </TouchableOpacity>
        )
      })} 
    />
  </Stack.Navigator>
  <ModalPortal />
</NavigationContainer>

If you just wanted to change the back button appearance only, You are better off with headerBackImage props of react-navigation stack.

Here's a Live Snack Example