Marker does not work on web

[xevi10h]

I have this MarkerComponent:

import { Marker } from 'react-native-maps';
import { useEffect, useState } from 'react';
import { Image } from 'react-native';
import { IMarker } from '@/shared/interfaces/IMarker';

export const MarkerComponent = ({ id, coordinates, importance }: IMarker) => {
    const [icon, setIcon] = useState(
        require('@/assets/images/map_marker_importance_1.png'),
    );
    const dimensions = 50;
    return (
        <Marker
            key={id}
            coordinate={{
                latitude: coordinates[1],
                longitude: coordinates[0],
            }}
        >
            <Image
                source={icon}
                style={{ width: dimensions, height: dimensions }}
                resizeMode={'contain'}
            />
        </Marker>
    );
};

That is being used here:

import MapViewType, {
    Camera,
    Marker,
    PROVIDER_GOOGLE,
} from 'react-native-maps';
import { useEffect, useRef, useState } from 'react';
import {
    ActivityIndicator,
    Platform,
    StyleSheet,
    Text,
    View,
} from 'react-native';
import MapView from '@/components/map/crossPlatformComponents/MapView';
import MapScreenButton from '@/components/map/MapScreenButton';
import { MarkerComponent } from '@/components/map/Marker';
import MapPlaceDetail from '@/components/map/placeDetail/MapPlaceDetail';
import MapServices from '@/services/map/MapServices';
import { useTabMapStore } from '@/zustand/TabMapStore';
import { useMainStore } from '@/zustand/MainStore';
import TextSearchMapScreen from '@/components/map/TextSearchMapDisabled';
import { router } from 'expo-router';
import { useCameraPermissions } from 'expo-camera';
import * as Location from 'expo-location';

export default function MapScreen() {
    const mapViewRef = useRef<MapViewType>(null);
    const [statusCameraPermissions, requestCameraPermissions] =
        useCameraPermissions();
    const [statusForegroundPermissions, requestStatusForegroundPermissions] =
        Location.useForegroundPermissions();
    const [isLoadingCoordinates, setIsLoadingCoordinates] = useState(false);
    const markerSelected = useTabMapStore((state) => state.tabMap.markerSelected);
    const currentUserLocation = useMainStore(
        (state) => state.main.currentUserLocation,
    );
    const markers = useTabMapStore((state) => state.tabMap.markers);
    const setMarkers = useTabMapStore((state) => state.setMarkers);

    const setCurrentUserLocation = useMainStore(
        (state) => state.setCurrentUserLocation,
    );

    useEffect(() => {
        const fetchMarkers = async () => {
            try {
                const markersData = await MapServices.getAllMarkers(
                    'importance',
                    'asc',
                );
                setMarkers(
                    markersData.map((marker) => ({
                        id: marker.id,
                        coordinates: [
                            marker.address.coordinates.lng,
                            marker.address.coordinates.lat,
                        ] as [number, number],
                        importance: marker.importance,
                        selected: marker.id === markerSelected,
                    })),
                );
            } catch (error) {
                console.error(error);
            }
        };
        fetchMarkers();
    }, []);

    useEffect(() => {
        if (markerSelected && markers.length > 0) {
            console.log('markerSelected', markerSelected);
            const coordinatesToSet =
                markers?.find((m) => m.id === markerSelected)?.coordinates ||
                currentUserLocation;
            if (coordinatesToSet) {
                const newCamera: Camera = {
                    center: {
                        latitude: coordinatesToSet[1],
                        longitude: coordinatesToSet[0],
                    },
                    zoom: 18,
                    heading: 0,
                    pitch: 0,
                    altitude: 10,
                };
                mapViewRef?.current?.animateCamera(newCamera, { duration: 1000 });
            }
        }
    }, [markerSelected]);

    const centerCoordinatesButtonAction = async () => {
        console.log('statusForegroundPermissions', statusForegroundPermissions);
        try {
            // Verificar el estado del permiso
            if (!statusForegroundPermissions?.granted) {
                // Solicitar permisos si aún no se han concedido
                const newPermissions = await requestStatusForegroundPermissions();
                if (!newPermissions.granted) {
                    // Manejar la situación si los permisos no son concedidos
                    console.log('Permission not granted or not requestable.');
                    return; // Salir de la función si no hay permisos
                }
            }

            // Proceder con la obtención de la ubicación si el permiso está concedido
            if (!currentUserLocation) {
                const position = await Location.getCurrentPositionAsync();
                console.log('Current position:', position);
                const { longitude, latitude } = position.coords;
                setCurrentUserLocation([longitude, latitude]);
            }
            if (currentUserLocation) {
                const newCamera: Camera = {
                    center: {
                        latitude: currentUserLocation[1],
                        longitude: currentUserLocation[0],
                    },
                    zoom: 15,
                    heading: 0,
                    pitch: 0,
                    altitude: 10,
                };
                mapViewRef?.current?.animateCamera(newCamera, { duration: 1000 });
            }
        } catch (error) {
            console.error(error);
        }
    };

    useEffect(() => {
        async function prepareWhenAuthenticated() {
            await centerCoordinatesButtonAction();
        }
        prepareWhenAuthenticated();
    }, []);

    useEffect(() => {
        async function recalculateCurrentLocation() {
            await centerCoordinatesButtonAction();
            setIsLoadingCoordinates(false);
        }
        if (!currentUserLocation) {
            recalculateCurrentLocation();
        }
    }, [currentUserLocation]);

    return (
        currentUserLocation && (
            <View style={{ flex: 1 }}>
                <View
                    style={{
                        flex: 1,
                    }}
                >
                    <MapView
                        provider={Platform.OS !== 'ios' ? 'google' : undefined}
                        followsUserLocation
                        showsUserLocation={Platform.OS === 'ios'}
                        ref={mapViewRef}
                        style={{
                            flex: 1,
                        }}
                        camera={{
                            center: {
                                latitude: currentUserLocation[1] || 0,
                                longitude: currentUserLocation[0] || 0,
                            },
                            heading: 10,
                            pitch: 0,
                            zoom: 15,
                            altitude: 10,
                        }}
                        googleMapsApiKey="<apikey>"
                        options={{
                            disableDefaultUI: true,
                        }}
                        loadingFallback={<ActivityIndicator size="large" color="#3F713B" />}
                    >
                        {markers.map((marker, index) => (
                            <MarkerComponent
                                key={index}
                                id={marker.id}
                                importance={marker.importance}
                                coordinates={marker.coordinates}
                            />
                        ))}
                    </MapView>
                </View>
                <MapScreenButton
                    onPress={async () => {
                        try {
                            if (
                                statusCameraPermissions?.canAskAgain &&
                                !statusCameraPermissions?.granted
                            ) {
                                await requestCameraPermissions();
                            }
                        } catch (error) {
                            console.log(error);
                        }
                        router.push('/qr-scanner');
                    }}
                    image={require('@/assets/images/map_qr_scanner.png')}
                    additionalBottom={60}
                />
                <MapScreenButton
                    onPress={async () => await centerCoordinatesButtonAction()}
                    image={require('@/assets/images/map_center_coordinates.png')}
                />
                <MapPlaceDetail />
                <TextSearchMapScreen
                    onPress={() => {
                        router.push('/text-search');
                    }}
                />
                {isLoadingCoordinates && (
                    <View
                        style={{
                            position: 'absolute',
                            top: 0,
                            left: 0,
                            right: 0,
                            bottom: 0,
                            justifyContent: 'center',
                            alignItems: 'center',
                            backgroundColor: 'transparent',
                        }}
                    >
                        <ActivityIndicator size="large" color="#3F713B" />
                    </View>
                )}
            </View>
        )
    );
}

`

I the console in the web is returning me this error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

[rinaldycodes]

yes, same here, error on when i add marker component