react-native-paper Surface and Card on iOS is weird

Current behaviour

I have this item on horizontal flatlist.

const Relation = () => {
  return (
    <Surface style={styles.surface}>
      <TouchableRipple
        borderless
        style={styles.touchable}
        onPress={onPress}>
        <View style={styles.body}>
          {/** render something */}
        </View>
      </TouchableRipple>
    </Surface>
  );
};

const styles = StyleSheet.create({
  body: {
    alignItems: 'center',
    padding: 12
  },
  surface: {
    marginVertical: 12,
    maxWidth: 140,
    borderRadius: 16,
  },
  touchable: {
    backgroundColor: 'rgb(153, 246, 228)',
    borderRadius: 16,
    flexGrow: 1,
  },
})

Items have different height, so I set flexGrow: 1 in TouchableRipple. But it only works on Android. On iOS, it doesn't grow to fill like Android.

Card component has same bug.

Expected behaviour

View inside Surface should fill all when flexGrow: 1 is set

How to reproduce?

https://snack.expo.dev/@pnthach95/surfaceios

Preview

Android android

iOS ios

What have you tried so far?

I set flex: 1 at this line https://github.com/callstack/react-native-paper/blob/198c4889357a8794ce7338c244fe5541ce5864a7/src/components/Surface.tsx#L205