maxWidth and maxHeight don't work as they should in React Native

I have the following code in react native:

import { useState, useEffect } from 'react';
import { View, Text, Image, StyleSheet, Pressable } from 'react-native';
import * as colors from '../colors/index';
//Other imports..

const Message = ({ item, chatDocumentID, currentUser, navigation }) => {
  const [imageUrl, setImageUrl] = useState(null);

  useEffect(() => {
     //fetch images..
    }
  }, [item.image?.uri, chatDocumentID]);

  const styles = StyleSheet.create({
    messageContainer: {
      padding: 5,
      marginBottom: 8,
      maxWidth: '80%',
      color: 'white',
    },
    sentMessageContainer: {
      alignSelf: 'flex-end',
      backgroundColor: colors.SECONDARY,
      borderTopLeftRadius: 15,
      borderBottomStartRadius: 15,
      borderTopEndRadius: 15,
    },
    receivedMessageContainer: {
      alignSelf: 'flex-start',
      backgroundColor: colors.PRIMARY,
      borderBottomStartRadius: 15,
      borderTopEndRadius: 15,
      borderBottomEndRadius: 15,
    },
    sentMessageText: {
      color: 'black',
      padding: 8,
    },
    receivedMessageText: {
      color: 'white',
      padding: 8,
    },
    messageImage: {
      maxWidth: 280,
      maxHeight: 330,
      //height: 330,
      //width: 280,
      borderRadius: 15,
    },
  });

  const isSentMessage = item.senderID === currentUser.uid;
  const messageContainerStyle = isSentMessage
    ? styles.sentMessageContainer
    : styles.receivedMessageContainer;
  const messageTextStyle = isSentMessage
    ? styles.sentMessageText
    : styles.receivedMessageText;

  const openFullScreenImage = uri => {
    navigation.navigate('ImageFullScreen', { imageUrl: uri });
  };

  return (
    <View style={[styles.messageContainer, messageContainerStyle]}>
      {imageUrl && (
        <Pressable onPress={() => openFullScreenImage(imageUrl)}>
          <Image
            style={styles.messageImage}
            source={{ uri: imageUrl }}
            resizeMode="cover"
          />
        </Pressable>
      )}
      {item.text && <Text style={messageTextStyle}>{item.text}</Text>}
    </View>
  );
};

export default Message;

In ImageUrl I have the URL of the image that comes to me from an API call, In the "messageImage" class of the StyleSheet, I don’t understand why if I had to write this:

 messageImage: {
      maxWidth: 280,
      maxHeight: 330,
      borderRadius: 15,
 }

the image is not displayed, but if I were to give it fixed values like this:

messageImage: {
      width: 280,
      height: 330,
      borderRadius: 15,
 }

with "height" and "width" the image would be seen correctly.

Obviously I don’t want to use fixed values for a matter of responsiveness. I also tried to use percentage values but it doesn’t work. Why don’t maxWidth and maxHeight work correctly?

Edit: Even if you don’t have any images you could replicate the result with a normal view backgroundColor, for example like this:

messageImage: {
      //width: 280,
      //height: 330,
      maxWidth: 280,
      maxHeight: 330,
      backgroundColor: "red"
      borderRadius: 15,
 },

the problem should arise in any case