Как я могу назначить источник Viro360Image состоянию / реквизиту?

Question

Я хочу иметь возможность установить источник компонента Viro360Image на URI, который я храню в качестве реквизита. Это возможно? Я получаю:

TypeError: "undefined is not an object (evaluating 'this.state.userImages[0].url')"

'use strict';

import React from 'react';
import { styles } from '../components/Styles'
import {
  ViroARScene,
  ViroAmbientLight,
  Viro360Image,
  ViroPortal,
  ViroPortalScene,
  Viro3DObject,
  ViroText,
} from 'react-viro';

const baseURL = 'https://ar-travel-app.herokuapp.com/'

export default class MainScene extends React.Component {
  state = {
    userImages: []
  }

  componentDidMount(){
    fetch(`${baseURL}images`)
        .then(response => response.json())
        .then(userImages => this.setState({ userImages }))
  }

  render(){
    return(
      <>
        <ViroARScene>
          <ViroAmbientLight color="#ffffff" intensity={200}/>
          <ViroPortalScene passable={true} dragType="FixedDistance" onDrag={()=>{}}>
            <ViroPortal position={[1, 0, -1]} scale={[.5, .5, .5]}>
            <Viro3DObject 
              source={require('./portal_res/portal_wood_frame/portal_wood_frame.vrx')}
              resources={[
                require('./portal_res/portal_wood_frame/portal_wood_frame_diffuse.png'),
                require('./portal_res/portal_wood_frame/portal_wood_frame_normal.png'),
                require('./portal_res/portal_wood_frame/portal_wood_frame_specular.png')
              ]}
              rotation={[0, -45, 0]}
              type="VRX"
            />
            </ViroPortal>
            <Viro360Image source={{ uri: this.state.userImages[0].url }} />
          </ViroPortalScene>
        </ViroARScene>
      </>
    )
  }
}

module.exports = MainScene;