Login Form - Copy this React, Tailwind Component to your project

Necesito refactorizar porque me tira error la const user: /* eslint disable react/no unstable nested components */ /* eslint disable react/self closing comp */ /* eslint disable react native/no inline styles */ /* eslint disable react/react in jsx scope */ import 'react native gesture handler'; import {NavigationContainer} from '@react navigation/native'; import { createDrawerNavigator, DrawerContentComponentProps, DrawerContentScrollView, DrawerItemList, } from '@react navigation/drawer'; import {useWindowDimensions, View, Text, StyleSheet} from 'react native'; import {CurrentOrder, ReadingOrders, ReadingRoutes} from './screens'; import {createStackNavigator} from '@react navigation/stack'; import {Login} from './screens'; import {AuthProvider} from './providers/AuthProvider'; import {Logout} from './ui'; import { useAuthStore } from './store'; import { UserData } from './infraestructure'; const Drawer = createDrawerNavigator(); const Stack = createStackNavigator(); const StackNavigatorInit = () => { return ( <Stack.Navigator screenOptions={{headerShown: false}}> <Stack.Screen name="Login" component={Login} /> <Stack.Screen name="Home" component={DrawerNavigator} /> </Stack.Navigator> ); }; const DrawerNavigator = () => { const dimensions = useWindowDimensions(); return ( <Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} />} screenOptions={{ drawerType: dimensions.width >= 758 ? 'permanent' : 'slide', headerShown: true, drawerActiveTintColor: 'white', drawerActiveBackgroundColor: '#F10506', drawerItemStyle: { borderRadius: 6, paddingHorizontal: 20, }, }}> <Drawer.Screen name="StackReadingRoutes" options={{ drawerLabel: 'Ordenes de lectura', title: 'Ordenes de lectura', }} component={StackReadingRoutes} /> </Drawer.Navigator> ); }; const StackReadingRoutes = () => { return ( <Stack.Navigator initialRouteName="ReadingRoutes" screenOptions={{ headerShown: true, headerStyle: { elevation: 0, shadowColor: 'transparent', }, }}> <Stack.Screen name="ReadingRoutes" component={ReadingRoutes} /> <Stack.Screen name="ReadingOrders" component={ReadingOrders} /> <Stack.Screen name="CurrentOrder" component={CurrentOrder} /> </Stack.Navigator> ); }; export const App = () => { return ( <NavigationContainer> <AuthProvider> <StackNavigatorInit /> </AuthProvider> </NavigationContainer> ); }; const CustomDrawerContent = (props: DrawerContentComponentProps) => { const user : UserData = useAuthStore(); console.log(' >', user.name); return ( <DrawerContentScrollView> <View style={{ width: 100, height: 100, margin: 30, borderRadius: 50, marginLeft: 'auto', marginRight: 'auto', backgroundColor: '#e2e0e0', }}> </View> <Text style={styles.user}> { user.name || 'undefined' } </Text> <Text style={styles.user}> { user || 'undefined' } </Text> <DrawerItemList {...props} /> <Logout /> </DrawerContentScrollView> ); }; const styles = StyleSheet.create({ user: { textAlign: 'center', fontSize: 18, fontWeight: '800', paddingBottom: 20, borderColor: '#ccc', borderBottomWidth: 1, marginBottom:20, }, });