Differences between Pressable and TouchableWithoutFeedback

Question

Pressable and TouchableWithoutFeedback are higher order components to add touch functionality to their children. They have very similar use cases. I guess I can use Pressable anywhere in place of TouchableWithoutFeedback(due official docs recommendation).

But the problem is that, sometimes they act differently. For example when I replace TouchableWithoutFeedback with Pressable, the layout changes. I don't know what causes that but I think Pressable acts like a separate view whereas touchablewithoutfeedback doesn't.

Can you clearly specify the differences between these two other than the props they differ?

Here is a place where they act differently:

with TouchableWithoutFeedback:

export default function App() {
  return (
    <TouchableWithoutFeedback onPress={() => alert("outer pressed")}>
      <View style={styles.container}>
        <View style={styles.box} />
      </View>
    </TouchableWithoutFeedback>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'blue',
  },
  box: {
    width: 50,
    height: 50,
    backgroundColor: 'red',
  }
});

with Pressable:

export default function App() {
  return (
    <Pressable onPress={() => alert("outer pressed")}>
      <View style={styles.container}>
        <View style={styles.box} />
      </View>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'blue',
  },
  box: {
    width: 50,
    height: 50,
    backgroundColor: 'red',
  }
});