Not able to view the component of the top tabs

Question

I am creating top tabs using "material-top-tabs". I have created a separate file for the component part called "LightingConfigScreen". The issue that I'm facing is that only the heading i.e. "Configuration" is visible and there's no screen rendering for the component part. Below is the code for your reference:

import React, { useEffect, useState } from 'react';

import UnderDevComponent from '../../../../../components/utility/UnderDevComponent';
import { ScrollView, BackHandler, View, Text, TouchableOpacity, Dimensions } from 'react-native';
import DeviceDetailsToolBar from '../../../../../components/actionBar/DeviceDetailsToolBar';
import { IDevice } from '../../../../../network/models/IDevices';
import { EventRegister } from 'react-native-event-listeners';
import Card from '../../../../../components/Card';
import { cardStyles, cardStyles as styles } from '../../../../../../assets/styles/ListCardStyles';
import { doCapitalizeFirstChar } from '../../../../../utility/Helper';
import { padding } from '../../../../../../assets/dimen/dimen';
import { DeviceCategory } from '../../helper/DeviceCategoryEnum';
import { DeviceRoute } from '../../../../../navigation/DevicesNavigator';
import { Switch, Slider } from 'react-native-elements';
import LinearGradient from 'react-native-linear-gradient';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { TabView, SceneMap } from 'react-native-tab-view';
import { NavigationContainer } from '@react-navigation/native';
//import TabScreens from './TabScreens';
import Collapsible from 'react-native-collapsible';
import DownArrowIcon from '../../../../../../assets/img/icons/bottom_sheet_down_arrow.svg';
import UpArrowIcon from '../../../../../../assets/img/icons/bottom_sheet_up_arrow.svg';
import LightingConfigScreen from './LightingConfigScreen';
import colors from '../../../../../../assets/color/colors';
import { fontFamily } from '../../../../../../assets/styles/FontStyle';
import { isAndroidTablet } from '../../../../../utility/DeviceHelper';

const Tab = createMaterialTopTabNavigator();

function LightingDetailScreen({ navigation, route }): JSX.Element {
    const deviceData: IDevice = route.params.deviceData;

    const [intensity, setIntensity] = useState(0); // Initial intensity value
    const [switchValue, setSwitchValue] = useState(false);
    const [isCardCollapsed, setIsCardCollapsed] = useState(false);

    const handleIntensityChange = (value) => {
        setIntensity(value);
    };

    const handleSwitchChange = (value) => {
        setSwitchValue(value);
    };


    useEffect(() => {
        const backAction = () => {
            EventRegister.emit('myCustomEvent', 'default');
            // navigation?.goback();
            route?.params?.navigation?.goback('o');
            return true;
        };

        const backHandler = BackHandler.addEventListener(
            'hardwareBackPress',
            backAction,
        );

        return () => backHandler.remove();
    }, []);

    return (
        <ScrollView>
            <DeviceDetailsToolBar
                // deviceData={undefined}
                menuShouldVisible={true}
                title={deviceData?.name}
                navigation={navigation}
            />

            <Card style={styles.detailCardViewContainer}>
                <View style={styles.detailHeaderRowContainer}>
                    <Text style={styles.cardHeader}>Device</Text>
                    <TouchableOpacity onPress={() => setIsCardCollapsed(!isCardCollapsed)}>
                        {isCardCollapsed ? (
                            <DownArrowIcon width={10} height={10} style={styles.iconStyle} />

                        ) : (
                            <UpArrowIcon width={10} height={10} style={styles.iconStyle} />
                        )}
                    </TouchableOpacity>
                </View>

                <Collapsible collapsed={isCardCollapsed}>
                    <View style={styles.lineView} />
                    <View style={styles.detailTrailContainer}>
                        <View style={styles.rowContainer}>
                            <View style={styles.leftAlignContainer}>
                                <Text style={styles.rowLabel}>IP Address</Text>
                            </View>
                            <View style={styles.rightAlignContainer}>
                                <Text style={styles.rowValue}>{deviceData?.ipAddress}</Text>
                            </View>
                        </View>

                        <View style={styles.rowContainer}>
                            <View style={styles.leftAlignContainer}>
                                <Text style={styles.rowLabel}>MAC Address</Text>
                            </View>
                            <View style={styles.rightAlignContainer}>
                                <Text style={styles.rowValue}>{deviceData?.macAddress}</Text>
                            </View>
                        </View>

                        <View style={styles.rowContainer}>
                            <View style={styles.leftAlignContainer}>
                                <Text style={styles.rowLabel}>FW Version</Text>
                            </View>
                            <View style={styles.rightAlignContainer}>
                                <Text style={styles.rowValue}>{deviceData?.fwVersion}</Text>
                            </View>
                        </View>

                        <View style={styles.rowContainer}>
                            <View style={styles.leftAlignContainer}>
                                <Text style={styles.rowLabel}>Serial Number</Text>
                            </View>
                            <View style={styles.rightAlignContainer}>
                                <Text style={styles.rowValue}>{deviceData?.serialNumber}</Text>
                            </View>
                        </View>

                        <View style={styles.rowContainer}>
                            <View style={styles.leftAlignContainer}>
                                <Text style={styles.rowLabel}>Last Updated</Text>
                            </View>
                            <View style={styles.rightAlignContainer}>
                                <Text style={styles.rowValue}>{deviceData?.lastUpdatedOn}</Text>
                            </View>
                        </View>

                        <View style={styles.rowContainer}>
                            <View style={styles.leftAlignContainer}>
                                <Text style={styles.rowLabel}>Last Reset At</Text>
                            </View>
                            <View style={styles.rightAlignContainer}>
                                <Text style={styles.rowValue}>-</Text>
                            </View>
                        </View>

                        <View style={styles.rowContainer}>
                            <View style={styles.leftAlignContainer}>
                                <Text style={styles.rowLabel}>Model Number</Text>
                            </View>
                            <View style={styles.rightAlignContainer}>
                                <Text style={styles.rowValue}>{deviceData?.modelNumber}</Text>
                            </View>
                        </View>

                        <View style={styles.rowContainer}>
                            <View style={styles.leftAlignContainer}>
                                <Text style={styles.rowLabel}>Category</Text>
                            </View>
                            <View style={styles.rightAlignContainer}>
                                <Text style={styles.rowValue}>{deviceData?.category}</Text>
                            </View>
                        </View>
                    </View>
                </Collapsible>
            </Card>

            <Card style={styles.detailCardViewContainer}>
                <View style={styles.detailHeaderRowContainer}>
                    <Text style={styles.cardHeader}>Controls</Text>
                </View>

                <View style={styles.lineView} />

                <View style={styles.detailTrailContainer}>
                    <View style={styles.rowContainer}>
                        <View style={styles.leftAlignContainer}>
                            <Text style={styles.rowLabel}>Intensity</Text>
                        </View>
                        <View style={styles.intensityContainer}>
                            <Text style={styles.rowValue}>{intensity}%</Text>
                        </View>
                        <View style={styles.rightAlignContainer}>
                            <Slider
                                style={{ width: '70%', marginTop: -12 }}
                                minimumValue={0}
                                maximumValue={100}
                                value={intensity}
                                step={1}
                                thumbStyle={{
                                    width: 10, // Customize thumb width
                                    height: 10, // Customize thumb height
                                    borderRadius: 10, // Make thumb circular
                                }}
                                trackStyle={{
                                    height: 2, // Customize track height
                                    borderRadius: 0, // Make track rounded
                                }}
                                onValueChange={handleIntensityChange}
                                thumbTintColor="#0F8D48" // Customize thumb color
                                minimumTrackTintColor="#0F8D48"
                            />
                        </View>
                    </View>

                    <View style={[styles.SwitchContainer, { marginBottom: padding() }]}>
                        <View style={styles.leftAlignContainer}>
                            <Text style={styles.rowLabel}>Switch On/Off</Text>
                        </View>
                        <Switch
                            style={{ marginTop: -5, marginRight: -9 }}
                            value={switchValue}
                            onValueChange={handleSwitchChange}
                            thumbColor={'#FFFFFF'}
                            trackColor={{ false: '#f4f3f4', true: '#0F8D48' }}
                        />
                    </View>
                </View>
            </Card>
            
            <Tab.Navigator>         //USING TAB NAVIGATOR HERE
                <Tab.Screen name="Configuration" component={LightingConfigScreen} />
                {/* <Tab.Screen name="Activity Logs" component={LightingActivityLogsScreen} /> */}
            </Tab.Navigator>
        </ScrollView>
    );
}
export default LightingDetailScreen;

I am creating the top tabs at the end.

Below is the minimal code of the above:

import React, { useEffect, useState } from 'react';

import UnderDevComponent from '../../../../../components/utility/UnderDevComponent';
import { ScrollView, BackHandler, View, Text, TouchableOpacity, Dimensions } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { TabView, SceneMap } from 'react-native-tab-view';
import { NavigationContainer } from '@react-navigation/native';
import LightingConfigScreen from './LightingConfigScreen';
import LightingActivityLogsScreen from './LightingActivityLogsScreen'


const Tab = createMaterialTopTabNavigator();

function LightingDetailScreen({ navigation, route }): JSX.Element {
    //Content for the Lighting Detail Screen

    return (
        <ScrollView>
           
            //TSX Code for the Lighting Detail Screen
            

            //TOP TABS
            <Tab.Navigator> 
                <Tab.Screen name="Configuration" component={LightingConfigScreen} />
                <Tab.Screen name="Activity Logs" component={LightingActivityLogsScreen} />
            </Tab.Navigator>
        </ScrollView>
    );
}
export default LightingDetailScreen;