When trying to run this code I get the error "Attempting to change the getter of an unconfigurable property" what do you think is the cause, I am running the code in snack expo

import * as React from 'react';
import { Button, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from 'react-navigation';

class ScreenComponentOne extends React.Component {
  render(){
    return(
      <View>
        <Button onPress={() => this.props.navigation.navigate('RouteNameTwo')} title="home"/>
      </View>
    )
  }
}

class ScreenComponentTwo extends React.Component {
  render(){
    return(
      <View>
        <Button onPress={() => this.props.navigation.navigate('RouteNameOne')} title="settings"/>
      </View>
    )
  }
}
const AppNavigator = createStackNavigator({
  RouteNameOne: ScreenComponentOne,
  RouteNameTwo: ScreenComponentTwo,
})

export default class App extends React.Component {
  render(){
    return <AppNavigator />
  }
}