I want to create tabs dynamically in react-native, below is the code but I'm getting

Uncaught Error: Couldn't find any screens for the navigator. Have you defined any screens as its children?

import React from 'react';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import ChildScreen from './ChildScreen';

const Tab = createMaterialTopTabNavigator();

const CreateTabs = (props) => {
    const { tabData } = props;
    
    return (

            <Tab.Navigator>
                {tabData.map((val, id) => 
                    <Tab.Screen
                        name={`Screen${id}`} key={id}
                        children={(props) => <ChildScreen {...props} data={val}/>}
                        options={{
                            tabBarLabel: `(${val.name})`
                        }}
                    />

                )}
            </Tab.Navigator>
    )
}
export default CreateTabs;

I'm using "@react-navigation/material-top-tabs": "^5.3.14" version of material-top-tabs

Is it possible to create tabs dynamically? Please suggest or provide a snack link with an example, I'm not able to get any solution to make it dynamic.