Props are undefined on React initialization. Why?

I am creating a VR application with React 360. What I am trying to do is to eventually create an application as shown here Facebook VR multi surface example. I am taking the code for that example and am trying to fit it into my application. However I'm having a problem with the following initialization of my React components.

I have the following react-360 application with the following code index.js

import React from 'react';
import connect from './Store';

import {
  asset,
  AppRegistry,
  StyleSheet,
  Text,
  View,
  VrButton,
} from 'react-360';

import Entity from 'Entity';


const ModelView = props => {

  *********** Problem **************
  Why are my props undefined if I am declaring it in the wrapper?
  **********************************

  return (
    <Entity
      style={{transform: [{scaleX: 1.25}, {scaleY: 1.25}]}}
      source={{obj: asset(`${props.planetName}.obj`), mtl: asset(`${props.planetName}.mtl`)}}
    />
  );
};

const ConnectedModelView = connect(ModelView);
export default ConnectedModelView;

AppRegistry.registerComponent('ModelView', () => ModelView);

From the code above, my props for the ModelView should not be undefined. On initialization, it should have the value of earth.

The props are supposed to be initialized in Store.js. Here is the code below:

import React from 'react';

const State = {
  planetName: 'earth'
};

const listeners = new Set();

export default function connect(Component) {
  return class Wrapper extends React.Component {
    state = {
      planetName: State.planetName
    };

    _listener = () => {
      this.setState({
        planetName: State.planetName
      });
    };

    componentDidMount() {
      listeners.add(this._listener);
    }

    componentWillUnmount() {
      listeners.delete(this._listener);
    }

    render() {
      return (
        <Component
          {...this.props}
          planetName={this.state.planetName}
        />
      );
    }
  };
}

Taking a page from the facebook code, what I am doing is initializing model view via Store.connect method. This method creates a wrapper around ModelView where I am setting the props via State.planetName. However, I keep getting undefined and I don't know why. I've hardcoded every part of the code which has State.planetName to the value of earth and it still is undefined. The props are not being set to the value I want and I'm not sure why. Can someone out there assist me with why this might be the case? I would appreciate the help.

It looks like you're rendering the ModelView and not the ConnectedModelView.