How can I prevent SQL injection in PHP?

marker not showing in React Leaflet

Acothley

Added a React Leaflet map to the site. I want to put a custom marker, but now it is not shown on the page. It is always shown in the corner of the map when scrolling. How can this be fixed?

// Marker

const Marker = () => {
  return (
    <div>
      <div
        className="marker"
        style={{ height: "30px", width: "30px", backgroundColor: "red" }}
      ></div>
    </div>
  );
};

export default Marker;


// Map

const Map = () => {
  const position = [51.505, -0.09];
  return (
    <div>
      <MapContainer
        center={[51.505, -0.09]}
        zoom={13}
        scrollWheelZoom={false}
        style={{ height: "100vh", width: "100%" }}
      >
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={position}></Marker>
      </MapContainer>
    </div>
  );
};

export default Map;