how to use nested routing with react-native

I am using react-native-router-flux for my apps main navigation. I need to setup a nested router. I have a map component that has a side bar with a List of Territories. When I click on a row I need to switch to a view that has the List of Subdivisions that belong to that Territory. I looked at some examples and tried to figure it out. Currently there are no errors in console but nothing shows up in the sidebar. If there is a better way of doing this please let me know. thanks!

Maprouter

    export default class RootRouter extends Component {
    render() {
        return(
            <Router hideNavBar={true}>
                <Schema name="default" sceneConfig={Navigator.SceneConfigs.FloatFromRight}/>
                <Route name="mapSurveyTerritories" wrapRouter={false} component={MapSurveyTerritories} initial={true}/>
                <Route name="mapSubdivisions" wrapRouter={false} component={MapSubdivisions} />
            </Router>
        );
    }
}

Map Component

BackAndroid.addEventListener('hardwareBackPress', function() {
    Actions.pop();
    return true;
});
export default class Map extends Component {
    constructor(props) {
        super(props);
        this.state = {
            region: Albuquerque,
        };
    }


    render() {
        const { region, markers,surveyTerritories,selectedMarket } = this.state;
        return (
          <View style={styles.container}>
                    <Navbar
                        title="Map"/>

            <View style={styles.innerContainer}>
                <MapView
                    style={styles.map}
                    initialRegion={region}
                    onLongPress={this.onPress.bind(this)}>
                    {markers.map(marker => (
                        <MapView.Marker
                            ref="m1"
                            key={marker.id}
                            coordinate={marker.coordinate}
                            title={marker.name}>
                        </MapView.Marker>
                    ))}
                </MapView>
                <ScrollView style={styles.sidebarContainer}>

                    <MapRouter />
                </ScrollView>
            </View>
          </View>
        );
    }
};

module.exports = Map;

Territories

class MapSurveyTerritories extends Component {
    constructor(props) {
        super(props);

        var ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 != r2
        });

        this.state = {
            dataSource: ds,
            showProgress: true
        };
    }

    componentDidMount() {
        this.fetchTerritories();
    }

    fetchTerritories() {
        this.setState({
            dataSource: this.state.dataSource
                .cloneWithRows(territoriesAlbuquerque),
            showSpinner: false
        });
    }

    renderRow(rowData) {
        return (
            <TouchableHighlight
                onPress={()=>Actions.mapSubdivisions({selectedTerritory:rowData})}
                underlayColor='#ddd'>
                <View style={styles.row}>
                    <View style={{paddingLeft: 20}}>
                        <Text>
                            <Text style={{ fontWeight: '600' }}> {rowData.properties.name} </Text>
                        </Text>
                    </View>
                </View>
            </TouchableHighlight>
        );
    }

    render() {
        return (
            <View style={{flex: 1,justifyContent: 'flex-start'}}>
<ListView
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow.bind(this)}/>
            </View>
        );
    }
}

module.exports = MapSurveyTerritories;

Subdivisions

class MapSubdivisions extends Component {
    constructor(props) {
        super(props);
var ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 != r2
        });
this.state = {
            dataSource: ds
        };
    }

    componentDidMount() {
        this.fetchSubdivisions();
    }

    fetchSubdivisions() {
        console.log('fetchSubdivisions', this.props.selectedTerritory);
        this.setState({
            dataSource: this.state.dataSource
                .cloneWithRows(subdivisionsAlbuquerque),
            showSpinner: false
        });
    }

    renderRow(rowData) {
        return (
            <TouchableHighlight
                onPress={()=>Actions.mapSubdivisionDetail({selectedSubdivision:rowData})}
                underlayColor='#ddd'>
                <View style={styles.row}>
                    <View style={{paddingLeft: 20}}>
                        <Text>
                            <Text style={{ fontWeight: '600' }}> {rowData.properties.name} </Text>
                        </Text>
                    </View>
                </View>
            </TouchableHighlight>
        );
    }

    render() {
         return (
            <View style={{flex: 1,justifyContent: 'flex-start'}}>
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow.bind(this)}/>
            </View>
        );
    }
}

module.exports = MapSubdivisions;