Can't import navigation screen

When I try to replace TabOneScreen with a custom screen name DashboardScreen

import DashboardScreen from '../screens/DashboardScreen';

It show

Module '"c:/Users/User/Projects/robinhacks/screens/DashboardScreen"' has no default export.ts(1192)

I use tab TypeScript in expo template https://docs.expo.dev/get-started/create-a-new-app/here is the index.tsx file in navigation folder

/** * A bottom tab navigator displays tab buttons on the bottom of the display to switch screens. * https://reactnavigation.org/docs/bottom-tab-navigator */const BottomTab = createBottomTabNavigator<RootTabParamList>();function BottomTabNavigator() {  const colorScheme = useColorScheme();  return (<BottomTab.Navigator      initialRouteName="TabOne"      screenOptions={{        tabBarActiveTintColor: Colors[colorScheme].tint,      }}><BottomTab.Screen        name="TabOne"        component={DashboardScreen}        options={({ navigation }: RootTabScreenProps<'TabOne'>) => ({          title: 'Dashboard',          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,          headerRight: () => (<Pressable              onPress={() => navigation.navigate('Modal')}              style={({ pressed }) => ({                opacity: pressed ? 0.5 : 1,              })}><FontAwesome                name="info-circle"                size={25}                color={Colors[colorScheme].text}                style={{ marginRight: 15 }}              /></Pressable>          ),        })}      /><BottomTab.Screen        name="TabTwo"        component={TabTwoScreen}        options={{          title: 'Tab Two',          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,        }}      /></BottomTab.Navigator>  );}

when I try to add {}

import { DashboardScreen } from '../screens/DashboardScreen';

but it show DashboardScreen error

    Module '"../screens/DashboardScreen"' declares 'DashboardScreen' locally, but it is not exported.ts(2459)DashboardScreen.tsx(3, 7): 'DashboardScreen' is declared here.

Here is DashboardScreen.tsx file

import React from 'react'import { Text, View} from 'react-native'class DashboardScreen extends React.Component {    constructor(props: any) {        super(props)        this.state = {}    }    render() {    return <View><Text>Dashboard Screen</Text></View>    }}

I also try to add * as

import * as DashboardScreen from '../screens/DashboardScreen';

but it show component error

Type 'typeof import("c:/Users/User/Projects/robinhacks/screens/DashboardScreen")' is not assignable to type 'ScreenComponentType<RootTabParamList, "TabOne"> | undefined'.ts(2322)types.d.ts(327, 5): The expected type comes from property 'component' which is declared here on type 'IntrinsicAttributes & RouteConfig<RootTabParamList, "TabOne", TabNavigationState<ParamListBase>, BottomTabNavigationOptions, BottomTabNavigationEventMap>'

here is types.tsx file

/** * Learn more about using TypeScript with React Navigation: * https://reactnavigation.org/docs/typescript/ */import { BottomTabScreenProps } from '@react-navigation/bottom-tabs';import { CompositeScreenProps, NavigatorScreenParams } from '@react-navigation/native';import { NativeStackScreenProps } from '@react-navigation/native-stack';declare global {  namespace ReactNavigation {    interface RootParamList extends RootStackParamList {}  }}export type RootStackParamList = {  Root: NavigatorScreenParams<RootTabParamList> | undefined;  Modal: undefined;  NotFound: undefined;};export type RootStackScreenProps<Screen extends keyof RootStackParamList> = NativeStackScreenProps<  RootStackParamList,  Screen>;export type RootTabParamList = {  TabOne: undefined;  TabTwo: undefined;};export type RootTabScreenProps<Screen extends keyof RootTabParamList> = CompositeScreenProps<  BottomTabScreenProps<RootTabParamList, Screen>,  NativeStackScreenProps<RootStackParamList>>;

What should I do?

https://reactnavigation.org/docs/bottom-tab-navigator/https://reactnavigation.org/docs/typescript/