StackNavigation props not working as expected - react-native

Question

I've configured the navigation as best I can, however there are no errors when the app runs. The buttons change shade to show they've been pressed but sadly they don't navigate.
I've tried different versions of Expo, React and StackNavigation too.
Here's a copy of the MainNavigator:
import ArtGallery from "./ArtGallery";
import HighNet from "./HighNet";
import Economist from "./Economist";
import Main from "./Main";
import { createStackNavigator, createAppContainer } from "react-navigation";
const screens = {
ArtGallery: {
screen: ArtGallery
},
HighNet: {
screen: HighNet
},
Economist: {
screen: Economist
},
Main: {
screen: Main
}
}
const config = {
headerMode: 'none',
initialRouteName: 'Economist'
}
const MainNavigator = createStackNavigator(screens, config);
export default createAppContainer(MainNavigator);
And here's a copy of the Main.js:
import React, { Component } from "react";
import { Center } from "#builderx/utils";
import Button2 from "../symbols/button2";
import Button21 from "../symbols/button21";
import Button22 from "../symbols/button22";
import { View, StyleSheet, Text } from "react-native";
import { MainNavigation } from "../screens/MainNavigator";
export default class Main extends Component {
render() {
return (
<View style={styles.root}>
<Center horizontal>
<Text style={styles.title}>TV Network</Text>
</Center>
<Center horizontal>
<Button2
onPress={() => this.props.navigation.navigate("Winkball")}
style={styles.winkTv}
buttonContent="WinkBall TV" />
</Center>
<Center horizontal>
<Button21
onPress={() => this.props.navigation.navigate("HighNet")}
style={styles.highNet}
buttonContent="High Net Worth Channel"
/>
</Center>
<Center horizontal>
<Button22
onPress={() => this.props.navigation.navigate("Economist")}
style={styles.artGalleryTv}
buttonContent="Economist TV"
/>
</Center>
</View>
);
}
}
const styles = StyleSheet.create({
root: {
backgroundColor: "white",
flex: 1
},
title: {
height: "6.19%",
width: "64.53%",
top: 68,
position: "absolute",
backgroundColor: "transparent",
fontSize: 48,
color: "rgba(109,104,104,1)"
},
winkTv: {
top: 309,
position: "absolute",
height: "5.665024630541872%",
width: "33.06666666666666%"
},
highNet: {
top: 384,
position: "absolute",
height: "5.665024630541872%",
width: "57.333333333333336%"
},
artGalleryTv: {
top: 460,
position: "absolute",
width: "42.13%",
height: "4.06%"
}
});