How to render an array of images in Typescript?

I have an array of objects. Each object has two properties: The first one is a string and the second one is an array of urls. this is an example of the json that I am working with:

{
  data : [ {contentString : "eating sushi", ["url", "url", "url"] },... ]
}

I want to use a FlatList to render each url in an Image component. However, in visual studio code I find that the property source in the Image component is undelined and displays the following error:

Type '{ uri: IUrl; }' is not assignable to type 'ImageSourcePropType | undefined'.
      Types of property 'uri' are incompatible.
        Type 'IUrl' is not assignable to type 'string'.

As I understand, url is indeed a string because, as shown in the code below, the interface IUrl defines its data type as a string so I can not see why I am getting this error. This is my code:

const Dashboard : React.FC  <DashScreenProps>= (props)=>{
   
    
    //interfaces
    //As mentioned above url is a string
    interface IUrl{
        url : string
    }

    interface IPost{
        contentString : string
        urls : IUrl[]
    }
    
    
   

    //local state variables
    const [arrayOfPosts, setArrayOfPosts] = useState<IPost[]>([])

   

    
    const getPostsFromFollowingUsers = async():Promise<boolean>=>{
        try {
            const response = await fetch(REMOTE_SERVER+`/userPost/getPostsFromFollowingUsers/${id}`)
            const parseResponse = await response.json()
            console.log('those are the posts', parseResponse)
            setArrayOfPosts(parseResponse.data)
            
        } catch (error) {
            console.log(error)
            
        }    
        
    }

    
    useEffect(()=>{
        getPostsFromFollowingUsers()
    },[]) 
    return(
            <View>
                
                {arrayOfPosts.map(post=>{
                    //{contentString, urls}
                    return(
                        <FlatList
                        data = {post.urls}
                        renderItem={({item}) => {
                            return (
                                <Image source={{ uri: item }} style={{ width: 50, height: 50 }} />
                            )
                        }}  
                        />
                    )
                })}
                 
                
            </View>
    )
}

export default Dashboard