I get this error "Error while updating property 'src' of a view managed by: RCTImageView" after this code?

Question

Am building a carousel project using react native, the code worked perfectly when i used only images ,before adding the sections "image" "title" in data I get this error "Error while updating property 'src' of a view managed by: RCTImageView" after this code , i tried many possible methods but still no result.

import * as React from 'react';
import { StatusBar, FlatList, Image, Animated, Text, View, Dimensions, StyleSheet, TouchableOpacity } from 'react-native';
const { width, height } = Dimensions.get('screen');

const data = [
   {imageUrl:'https://images.unsplash.com/photo-1509023464722-18d996393ca8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
  title: "Hope"},
   {imageUrl:'https://images.unsplash.com/photo-1494587351196-bbf5f29cff42?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80',
  title: "Hope2"},
   {imageUrl:'https://images.unsplash.com/photo-1439792675105-701e6a4ab6f0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1052&q=80' ,
  title: "Hope3"} 
  
];
export default () => {
  const scrollX=React.useRef(new Animated.Value(0)).current;
    return (
        <View >
            <StatusBar hidden />
            <View
            style={StyleSheet.absoluteFillObject}>
               {data.map((image,index)=>{
                 const inputRange=[
                   (index -1)*width,
                   index*width,
                   (index+1)*width
                 ]
                 const opacity = scrollX.interpolate({
                   inputRange,
                   outputRange:[0,1,0]
                 })
                 return <Animated.Image
                 key={'image-${index}'}
                 source={{uri:image}}
                 style={[
                   StyleSheet.absoluteFillObject,
                   {opacity}
                 ]}
                 
                 />
               })}
            </View>
            <Animated.FlatList
            data={data}
            onScroll={Animated.event(
              [{nativeEvent:{contentOffset:{x:scrollX}}}],
              {useNativeDriver: true}
            )}
            
            keyExtractor={(_,index)=> index.toString()}
            renderItem={({item})=> {
                return <View >
                  <Text style={{color:'white'}}> {item.title} </Text>
                  <Image source={{uri:item.imageUrl}} 
                  />
                </View>
            }}
            />
        </View>
    );
};

Answer 1

Try this. Update source in Animated.Image to image.ImageUrl instead of just "image"

   <Animated.Image
             key={'image-${index}'}
             source={{uri:image.imageUrl}}
             style={[
               StyleSheet.absoluteFillObject,
               {opacity}
             ]}
             
             />