Cannot read property 'rotationOffset' of undefined - json

Question

I am using react-vr and trying to use the json object to render image, but I'm getting an error that the browser cannot read property 'rotationOffset' of undefined. Below is my code for reference.
static defaultProps = {
portal: 'webTour.json',
} //assigning the json to a variable.
componentDidMount() {
fetch(asset(this.props.portal).uri)
.then(response => response.json())
.then(responseData => {
this.init(responseData);
})
.done
();
}
init(tourConfig) {
// Initialize the tour based on data file.
this.setState({
data: tourConfig,
locationId: null,
nextLocationId: tourConfig.firstPhotoId,
rotation: tourConfig.firstPhotoRotation + (tourConfig.photos[tourConfig.firstPhotoId].rotationOffset || 0),
});
}
render() {
//some code
const locationId = this.state.locationId;
const photoData = (locationId && this.state.date.photos[locationId]) || null;
const rotation = this.state.data.firstPhotoRotation + ((photoData && photoData.rotationOffset) || 0);
const isLoading = this.state.nextLocationId !== this.state.locationId;
return (
<Pano source = {asset(this.state.data.photos[this.state.nextLocationID].uri)} />
}
And below is my json file for reference.
{
"nave_icon": "gateway.png",
"firstPhotoID" : "112001",
"firstPhotoRotation" : 90,
"photos":{
"112001":{
"rotationOffset": 0,
"uri": "CustomPano_2.jpg",
}
}
}
What I'm trying to do is that change the background image with the objects inside the Pano. Am I missing any essential syntax? I've spent hours to figure out the problem is not working. Any help is much appreciated.