Изменить привязку изображения (маркера / булавки) CSS (ReactJs)

Question

В настоящее время я борюсь за изменение "якоря" (если я могу сказать) булавки <div/> Я пытаюсь добавить в свой проект. Раньше мне приходилось иметь дело с этим в Xamarin, но сейчас, реагируя, я не вижу, как я могу заставить его работать как положено.

У меня есть этот код:

Map.tsx

import * as React from 'react';
import {LocationModel} from "app/models/LocationModel";
import ReactMapGL,{ Marker} from 'react-map-gl'
import * as style from './style.css'

export interface MapProps {
    locations: LocationModel[]; // let's take the Eiffel Tower location: (latitude: 48.8584, longitude: 2.2945)
}

export interface MapState {
    viewport: any;
}

const mapboxToken = "my-token";
const mapboxStyleUrl = "my-style";

export class Map extends React.Component<MapProps, MapState> {
    constructor(props?: NightMapProps, context?: any) {
        super(props, context);

        this.state = {
            viewport: {
                width: "100vw",
                height: "100vh",
                latitude: 48.8584,
                longitude: 2.2945,
                zoom: 8
            }
        };
    }


    render() {
        return <div>
            <ReactMapGL
                {...this.state.viewport}
                onViewportChange={(viewport) => this.setState({viewport})}
                mapboxApiAccessToken={mapboxToken}
                mapStyle={mapboxStyleUrl}
                children={this.props.children}>
                {this.props.locations.map(location => (
                    <Marker longitude={location.longitude} latitude={location.latitude}>
                        <div className={style.pin}><img src={"assets/pins/red.png"}/></div>
                    </Marker>
                ))}
            </ReactMapGL>
        </div>
    }
}

export default Map

style.css

.pin {
  ???????
}

Что следуетЯ вставил свой CSS, чтобы иметь булавку, где основание - это местоположение булавки (а не центр изображения ...)

// default fixtures for LocationsStore
const defaultLocations = [
    new PlaceModel("Eiffel Tower", "FIFA World Champions !", new LocationModel(48.8584, 2.2945)),
];

// how to use the component?
render() {
    return (
        <div className={style.container}>
            <Map
                locations={defaultLocations}
            />
        </div>
    );
}