All icons throw `Icon with name "____" not found within the provided set.`

import React, { Component } from "react";

import { NavigationBar, Icon, Title, Text } from "@shoutem/ui";
import * as Font from "expo-font";
export default class App extends Component {
  state = {
    fontsAreLoaded: false,
  };

  async _loadFonts() {
    await Font.loadAsync({
      Rubik: require("./assets/fonts/Rubik-Regular.ttf"),
      "Rubik-Black": require("./assets/fonts/Rubik-Black.ttf"),
      "Rubik-BlackItalic": require("./assets/fonts/Rubik-BlackItalic.ttf"),
      "Rubik-Bold": require("./assets/fonts/Rubik-Bold.ttf"),
      "Rubik-BoldItalic": require("./assets/fonts/Rubik-BoldItalic.ttf"),
      "Rubik-Italic": require("./assets/fonts/Rubik-Italic.ttf"),
      "Rubik-Light": require("./assets/fonts/Rubik-Light.ttf"),
      "Rubik-LightItalic": require("./assets/fonts/Rubik-LightItalic.ttf"),
      "Rubik-Medium": require("./assets/fonts/Rubik-Medium.ttf"),
      "Rubik-MediumItalic": require("./assets/fonts/Rubik-MediumItalic.ttf"),
      "Rubik-Regular": require("./assets/fonts/Rubik-Regular.ttf"),
      "rubicon-icon-font": require("./assets/fonts/rubicon-icon-font.ttf"),
    });

    this.setState({ fontsAreLoaded: true });
  }

  async componentDidMount() {
    this._loadFonts();
  }
  render() {
    if (this.state.fontsAreLoaded) {
      return (
        <NavigationBar
          centerComponent={<Title>RoomEase</Title>}
          rightComponent={<Icon name="left-arrow" />}
        ></NavigationBar>
      );
    } else {
      return null;
    }
  }
}