So, I am using a FlatList to render menuItems, but for some reason images are not rendering, it is displaying this error bundling failed: app\FileMenu.js: app\FileMenu.js:Invalid call at line 35: require(item.img). I dont know why is this happening, when the image is called properly, I could really use some help.

class FileMenu extends Overlay {
    constructor(props) {
        super(props, null, null)
        this.state = {visible: false, menuItems: [
            {   name:'Rename',
                img: './img/renameFile.png'
            },
            {
                 name: 'Move',
                 img: './img/moveFile.png'
            }         
        ]}
    }

    renderMenuItem({item, index}) {
        return <View style={styles.container}>
        <Text style={styles.items}>{item.name}</Text>
        <Image
           source={require(item.img)}
         style={{ width:'30%', height:'30%' }}
           >
           </Image>
        </View>
    }
    onBackdropPress() {
        this.setState({visible: false})

    }
    render() {
       return <Overlay style={styles.overlay} isVisible={this.state.visible}
                       onBackdropPress={this.onBackdropPress.bind(this)}>                     
                   <FlatList data={this.state.menuItems} 
                       renderItem={this.renderMenuItem.bind(this)} 
                       keyExtractor={(item, index) => `${index}`}>
                   </FlatList>
                 <TouchableOpacity
                 onPress={this.onBackdropPress.bind(this)}
                      style={styles.button}>                    
                      <Text>X</Text>
                </TouchableOpacity>
             </Overlay>
    }
}

export {FileMenu}