I am doing a location-based react native app and i wanted to enable locations of users. But suddenly i receive an error about babel config file here the error: appscreensEnableLocation.jsx: You appear to be using a native ECMAScript module configuration file, which is only supported when running Babel asynchronously. I will share my codes with you so anyone can help?

//here my babelconfig.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ["nativewind/babel", "react-native-reanimated/plugin"],
  };
};

// EnableLocation.jsx

import { View, Text, SafeAreaView, Image, TouchableOpacity } from 'react-native';
import * as Location from 'expo-location';
import { useEffect, useState } from 'react';

export default function EnableLocation({ navigation }) {
  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        setErrorMsg('Permission to access location was denied');
      } else {
        navigation.navigate('Intro');
      }

      let location = await Location.getCurrentPositionAsync({});
      setLocation(location);
    })();
  }, []);

  let text = 'Waiting..';
  if (errorMsg) {
    text = errorMsg;
  } else if (location) {
    text = JSON.stringify(location);
  }

  return (
    <SafeAreaView className="flex-1 bg-white">
      <View className="flex-row justify-items items-center">
        <Image
          className="ml-6 h-8 w-8 mr-52 mt-6"
          source={require('../assetsApp/navigation.png')}
          resizeMode="contain"
        />
        <TouchableOpacity onPress={() => navigation.navigate('Intro')}>
          <Text className="mt-6 ml-14 text-gray-400 font-customFont">Atla</Text>
        </TouchableOpacity>
      </View>
      <View className="mt-4 ml-6">
        <Text className="font-extrabold text-2xl">Konumu Etkinleştir</Text>
        <Text className="mt-4 text-gray-500">Yakala konum açıkken daha iyi çalışır.</Text>
      </View>
      <View className="flex-1 justify-center items-center mt-5">
        <Image
          className="w-full h-full"
          source={require('../assetsApp/yakala-konum.png')}
          resizeMode="contain"
        />
      </View>
      <View>
        <Text className="text-s text-gray-500 text-center mt-1 mb-2 mr-4 ml-4">
          Yakala, uygulamayı kullanırken yakınınızdaki işletmeleri bulmak, size daha iyi bir deneyim sunmak ve daha fazlası için konumunuzu kullanır.
        </Text>
        <Text className="text-s text-gray-500 text-center mt-1 mb-2 mr-4 ml-4">Konum ayarlarınızı istediğiniz zaman değiştirebilirsiniz.</Text>
        <Text className="text-s text-blue-600 text-center mt-1 mb-2 mr-4 ml-4">Daha fazlası</Text>
      </View>
      <View className="justify-center items-center h-12 m-4 rounded mt-6 mb-10 bg-red-400">
        <TouchableOpacity onPress={{}}>
          <Text className="text-center text-white font-medium text-lg">Tamam, anladım</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
}