React Native Google Maps API - Mapa não aparece

Boa tarde! Estou fazendo um site com React Native onde seria necessário exibir um mapa simples com a API do Google, como um protótipo para um projeto que estou desenvolvendo. Porém, o mapa não aparece, o que estou fazendo de errado? Segue abaixo os códigos:

Mapa.jsx:

import { Loader } from '@googlemaps/js-api-loader';

export default _Mapa => {
const apiOptions = {
apiKey: "AIzaSyDmTMjXl-1Jue9IycTYfEfFin6cnCSYCXk"
}

const loader = new Loader(apiOptions);

const x = document.getElementById('Loader');

function displayMap() {
const mapOptions = {
center: { lat: -22.55847412950531, lng: -47.44491661648964 },
zoom: 14
};
const mapDiv = document.getElementById('map');
const map = new window.google.maps.Map(mapDiv, mapOptions);
return map;
}
}

App.jsx:

import React from 'react';

import { BrowserRouter } from 'react-router-dom'

import Logo from "../components/templates/Logo";
import Nav from "../components/templates/Nav";
import Routes from './Routes';
import Footer from "../components/templates/footer";
import Mapa from "../main/Mapa"

export default props =>
<BrowserRouter>
<div className="app">
<Logo />
<Nav />
<Routes />
<Footer />
<Mapa />
</div>
</BrowserRouter>

Routes.jsx:

import React from "react";
import { Routes, Route } from "react-router-dom";

import Home from '../components/home/Home'
import UserCrud from '../components/user/UserCrud'
import Login from "../Login/Login";
import Mapa from "./Mapa"

export default props => (
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/users" element={<UserCrud />} />
<Route path="*" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/Mapa" element={<Mapa />} />
</Routes>
);

Sou iniciante ainda em JS, se puderem me ajudar de alguma forma eu agradeceria muito!