Differences between Pressable and TouchableWithoutFeedback

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',  }});