передать навигатор в заголовок

Я столкнулся с той же проблемой, что и в следующем вопросе (Перейдите на другой экран с помощью кнопки в заголовке), которая дублируется на Гитб. Документация по этим функциям находится здесь и здесь.

Я попытался реализовать предложенное решение, но получил следующую ошибку

Objects are not valid as React child (found: object with keys{right}). If you meant to render a collection of children, use an array instead.

Если бы вы могли мне помочь, это было бы очень признательно.

оскорбительные компоненты:

class Bookings extends Component {
   state = {
     BookingsList: [],
    }
    static navigationOptions = {
      title: 'Bookings',
      headerStyle: {
       backgroundColor: '#49E841'
     },
     header:({ navigate }) => ({
       Right: (
        <HomeButton navigate={navigate}/>
        ),
      }),
    }
  //...More stuff that's not relevant
 }

 class HomeButton extends Component {
   render() {
   console.log(this.props)
   return (
   <TouchableHighlight
     onPress={() => this.props.navigate('Home')}
   >
     <View>
       <Image
          source={require('./Assets/home.png')}
       />
    </View>
  </TouchableHighlight>
  )}
 };

 const RallyMobileNavigator = StackNavigator({
   Home: { screen: RallyMobile },
   LogIn: { screen: LogIn },
   Bookings: { screen: Bookings},
   Menu: { screen: Menu },
   },{
    initialRouteName: 'Home',
    headerMode: 'screen'
  });

Вот трассировка стека: