Неожиданный токен, ожидаемый "," - в React Native Navigation при попытке установить значок панели вкладок

Question

Я не вижу ни Рифмы, ни причины для этого. Я просто пытаюсь установить вкладки навигации нижней вкладки, чтобы иметь значки. Я ссылаюсь на мой старый проект И смотрю на реагирующие нативные документы. Когда я использую эти методы, я все еще получаю эту ошибку.

SyntaxError: C:\Users\jakob\projects\security-business\cloakd-customer\components\TabBarIcon.ts: Unexpected token, expected "," (9:6)

   7 |   return (
   8 |     <Ionicons
>  9 |       name={props.name}
     |       ^
  10 |       size={26}
  11 |       style={{ marginBottom: -3 }}
  12 |       color={props.focused ? "black" : Colors.primary}
Failed building JavaScript bundle.

По сути, я делаю компонент значка панели вкладок, хотя я пробовал это делать, не создавая и собственный компонент. Простой компонент здесь:

import React from "react";
import { Ionicons } from "@expo/vector-icons";

import Colors from "../constants/colors";

export default function TabBarIcon(props) {
  return (
    <Ionicons
      name={props.name}
      size={26}
      style={{ marginBottom: -3 }}
      color={props.focused ? "black" : Colors.primary}
    />
  );
}

, и я импортирую и использую его здесь, в моем файле навигатора в нижней вкладке

import React from "react";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
import { createStackNavigator } from "react-navigation-stack";
import { Platform } from "react-native";

import FindCompanyTabScreen from "../screens/FindCompanyTabScreen.tsx";
import RequestOfficerTabScreen from "../screens/RequestOfficerTabScreen.tsx";
import BusinessProfileTabScreen from "../screens/BusinessProfileTabScreen.tsx";

import TabBarIcon from "../components/TabBarIcon";
import Colors from "../constants/Colors.js";

const FindCompanyStackNavigator = createStackNavigator({
  Find: { screen: FindCompanyTabScreen },
});
FindCompanyStackNavigator.navigationOptions = ({ navigation }) => ({
  tabBarLabel: "Find",
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === "ios"
          ? `ios-home${focused ? "" : "-outline"}`
          : "md-home"
      }
    />
  ),
});

const BottomTabNavigator = createMaterialBottomTabNavigator(
  {
    FindCompanyStackNavigator,
    RequestTabScreen,
    BusinessProfileTabScreen,
  },
  {
    initialRouteName: "RequestTabScreen",
    activeColor: Colors.main,
    inactiveColor: "#226557",
    barStyle: { backgroundColor: "#F6F6F6" },
  }
);

export default BottomTabNavigator;

Пожалуйста, помогите! Спасибо.