SPA React(18.2) App: React-Leaflet map component renders with no errors but off the side of the screen ENTIRELY. How to move it?

I'm using react18 to create an app. Goal is to add a component 'page' that includes a map that takes up about 50 to 70% of the screen and includes markers for current user's location first (and add more markers once that is accomplished and styled.

I've created child nested components to be used by parent components and routes for pages:

components/CurrentLocation/index.js:

import { useEffect, useState } from 'react';
import { MapContainer, TileLayer, useMap, Marker, Popup, Circle } from 'react-leaflet';
import tileLayer from '../TileLayer/index';

const center = [52.22977, 21.01178];

const Location = () => {
  const map = useMap();
  const [position, setPosition] = useState(null)

  useEffect(() => {
    map.locate({
      setView: true
    })
    map.on('locationfound', (event) => {
      setPosition(event.latlng)
    })
  }, [map])

  return position
    ? (
      <>
        <Circle center={center} weight={2} color={'red'} fillColor={'red'} fillOpacity={0.1} radius={500}></Circle>
        <Marker position={position}>
          <Popup>You are here</Popup>
        </Marker>
      </>
    )
    : null
}

const MapWrapper = () => {
  return (
    <MapContainer
      center={center}
      zoom={18}
      scrollWheelZoom={false}
    >
      <TileLayer {...tileLayer} />
      <Location />
    </MapContainer>
  )
}

export default MapWrapper;

MapWrapper is imported to Locator/index.js

import React, { Component } from 'react';
import { Text, Box, ChakraProvider } from '@chakra-ui/react'
import Partners from '../Partners';
import MapWrapper from '../CurrentLocation';
import './style.css';


class Locator extends Component {

  render() {
    return (
      <div>

        <ChakraProvider>
          <Box display="flex" justifyContent="center">
            <Text>Select your store</Text>
          </Box>

          <Box bgColor='#628E90' border="3px solid white" minH='3500px' mt={3}>
            <Text>Test 2</Text>
            <Box className='map-box' border="3px solid white" display='inline-flex' ml={5}>
              <Text>Map SHOULD display here</Text>
              <MapWrapper />
            </Box>
            <Box display='flex' justifyContent='right'>
              // dynamically rendered list of stores with inventory
              <Partners />
            </Box>
          </Box>
        </ChakraProvider>

      </div>
    )
  }
}

export default Locator;

Locator gets imported to /src/App.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, } from 'react-router-dom';
import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  createHttpLink,
} from '@apollo/client';
import { setContext } from '@apollo/client/link/context';
import './App.css';
import { ChakraProvider } from '@chakra-ui/react';
import { Box } from '@chakra-ui/react';
import NavMenu from './components/NavMenu/NavMenu';
import Home from './pages/Home';
import Login from './pages/Login';
import Signup from './pages/Signup';
import PartnerLogin from './pages/PartnerLogin';
import Education from './pages/Education/Education';
import PartnerInventory from './pages/PartnerInventory';
import Cart from './components/Cart/Cart.js';
import CustomerPage from './pages/CustomerPage';
import { StoreProvider } from './utils/GlobalState.js';
import Locator from './components/Locator/index'
import NoMatch from './components/NoMatch'

const httpLink = createHttpLink({
  uri: '/graphql',
});

const authLink = setContext((_, { headers }) => {
  const token = localStorage.getItem('id_token');
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : '',
    },
  };
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});


function App() {
  document.title = 'Too Good To Waste';

  return (
    <ApolloProvider client={client}>
      <Router>
        <StoreProvider>
          <ChakraProvider>
            <Box minH='1500px' bgColor='#F5EFE6'>
              <header>
                <NavMenu />

                <Box display="flex" justifyContent="center">
                  <Link id="home" to="/" className="blk-let">TOO</Link>
                  <Link id="home" to="/" className="csv-let">Good</Link>
                  <Link id="home" to="/" className="blk-let">TO</Link>
                  <Link id="home" to="/" className="csv-let">Waste</Link>
                </Box>

                <Cart />
              </header>

              <main>
                <Routes>
                  <Route path="/" element={<Home />} />
                  <Route path="*" element={<NoMatch />} />
                  <Route path="/signup" element={<Signup />} />
                  <Route path="/login" element={<Login />} />
                  <Route path="/locator" element={<Locator />} />
                  <Route path="/partnerlogin" element={<PartnerLogin />} />
                  <Route path="/education" element={<Education />} />
                  <Route path="/customer" element={<CustomerPage />} />
                  <Route path="/partnerInventory" element={<PartnerInventory />} />
                </Routes>
              </main>
            </Box>
          </ChakraProvider>
        </StoreProvider>
      </Router>
    </ApolloProvider>
  );
}

export default App;

And finally App is imported to /src/index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Dependencies for reference:

"dependencies": {
    "@apollo/client": "^3.7.1",
    "@chakra-ui/icons": "^2.0.11",
    "@chakra-ui/react": "^2.3.6",
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "dayjs": "^1.11.6",
    "framer-motion": "^7.6.1",
    "graphql": "^16.6.0",
    "install": "^0.13.0",
    "jwt-decode": "^3.1.2",
    "leaflet": "^1.9.2",
    "react": "^18.2.0",
    "react-animations": "^1.0.0",
    "react-awesome-reveal": "^4.1.0",
    "react-burger-menu": "^3.0.8",
    "react-dom": "^18.2.0",
    "react-error-boundary": "^3.1.4",
    "react-icons": "^4.6.0",
    "react-leaflet": "^4.1.0",
    "react-responsive-carousel": "^3.2.21",
    "react-router-dom": "^6.4.2",
    "react-scripts": "5.0.1",
    "styled-components": "^5.3.6",
    "web-vitals": "^2.1.4"
  },

I thought it wasn't rendering but then realized there were no errors. Upon turning off every styling option in the dev tools console, FINALLY, a tiny map corner poked out from the top left. The pics show the element selected with leaflet css that is imported from the css link. The item value I was messing with was:

style="transform: translate3d( 0px, 0px, 0px) scale(0.5);"

Changing the first 0 to 60px moved the very small rendering of the world map to the right, followed by 100px in second spot moved the rendering of the map down.

It did not solve any issues however because the map element still identifies as being in the position it started: kicked up and left off of the screen. Not to mention its tools like "+/-" for zoom etc. I tried a plethora of css ways that would normally affect SOMETHING but so far none of ways I know are actually getting it to budge at all let alone render in the box it's supposed to populate to.

I am going to try playing with adding the translation styling (even though it doesn't solve the overall problem of "map's home and center exists off of the screen" but it seems like there should be at least one better way!