Correct way of adding dynamic tab navigation screens: createMaterialTopTabNavigator

Question

Code is working just fine. All I want to know is if this is the correct way of doing it.

I want tabs based on values in array so I did this:

import React from "react";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";

const Tab = createMaterialTopTabNavigator();

function ProductListNavigator({ route }) {
  const { subCategories, selectedSubcategory } = route.params;
  return (
    <Tab.Navigator
      lazy={true}
      lazyPreloadDistance={3}
    >
      {subCategories.map((subCategory) => (
        <Tab.Screen
          key={subCategory.id}
          name={subCategory.name}
          component={AppProductList}
          options={{ tabBarLabel: subCategory.name }}
          initialParams={{ subCategory }}
        />
      ))}
    </Tab.Navigator>
  );
}

export default ProductListNavigator;

Is this going to be inefficient? Or is there a better way of doing it?

I am using React navigation v5