Custom font not rendering in app using React Native (Expo)

So basically I'm trying to use a custom font throughout my app and to do so, I've made a custom component like so:

import React from "react";
import { Text, StyleSheet } from "react-native";
import * as Font from "expo-font";

export default class MyAppText extends React.Component {
  constructor(props) {
    super(props);
  }

  async componentDidMount() {
    await Font.loadAsync({
      'Wels': require('../assets/fonts/GTWalsheimPro-Regular.ttf'),
    });
  }

  render() {
    return (
      <Text style={[styles.text, this.props.style]}>{this.props.children}</Text>
    );
  }
}

const styles = StyleSheet.create({
  text: {
    fontFamily: "Wels",
  },
});

and used it like so:

import { MyAppText } from "../components/MyAppText";

<MyAppText style={styles.head}>Login</MyAppText>

however this does not seem to work and I get all sorts of errors, I tried just changing the fontFamily for every Text I had but even that won't work for some reason.

The error I've been getting recently is attached below. Thanks in advance :)