React: Issue with message item for chat UI

I'm working on a reac-native chat app, I want to add a samll image of the user to the left of each message, the image will appear only if:

1. The previous message belongs to my user
2. If the user sent multiple messages in a row, the image will only appear on the last received one.

To better understand what I'm trying to do check this image (look at the column on the left, the little image with user default image)

https://i.imgur.com/CaKltON.jpg

Each message object has a user_id value which is the id of the user that sent the message I store messages in root.mapStore.activeChatMessages mobx value and pass each message and index as a prop to MessageCard

FlatList component

<FlatList 
            vertical={true} 
            data={root.mapStore.activeChatMessages} keyExtractor={item => item.provisionalId.toString()}
            renderItem={({ item, index }) => 
            <MessageCard1 item={item} index={index}></MessageCard1>
            
            }
            />

MessageCard

export default MessageCard= observer((props) => 
{
    
    const { item, index } = props;

    const showUserImage = () =>
    {
        //Put logic here
    };

    return (
    <View style={{ width:'60% , flexDirection:'row',alignItems:'center }}>
        { showUserImage() && (
            <Image></Image>
        )}
        <Text>{ item.messageBody }</Text>
    </View>

);

});