Are you able to programmatically generate screens inside React Navigation Tab Navigator

Using React-Navigation, I am trying to generate an unknown number of tabs based off of the values that I've drawn from an array, and pass the data from that array value into the screen. For example, if I have 2 accounts, I would expect 2 tabs with screens for each one, but if I have 5 accounts, there are 5 tabs, with their own screens that are generated programatically from the values that are sent across from the database.

What I have so far, and what I am trying to do is:

interface Account {
  accountNumber: string;
  balance: number;
}

const accounts: Account[] = [
  { accountNumber: '1', balance: 10 },
  { accountNumber: '2', balance: 15 },
  { accountNumber: '3', balance: 20 }
];


class AccountScreen extends React.Component<Account>{
  constructor(props: Account) {
    super(props)
  }

  render() {
    return (
      <View>
        <Text>This is an Account</Text>
        <Text>Account Number: {this.props.accountNumber}</Text>
        <Text>Balance: £{(this.props.balance/100).toFixed(2)}</Text>
      </View>
    );
  }
};

const accountScreens = {};

accounts.forEach(account => accountScreens[account.accountNumber] = { screen: AccountScreen, props: account }); 
// SOMETHING LIKE THIS

export default AccountNavigator = createMaterialTopTabNavigator(accountScreens);

The screens render with the correct tabs, but the values within each account are not passed down through props. I know that you can't pass pass props directly into the Navigator, but I cannot figure out how that data could be accessed by the component.

Am I building this fundamentally wrong, or is there just some syntactic thing that I'm missing?

Thanks for your help!