title: ReactJs Leaflet Marker Location Position Problem
body: <p>I am trying to add a map in my reactjs project with leaflet and want to show the location's of vehicles on the map. I made a sample usage for this. But When i used marker on the map i see that (as you can see in this image):
    <img src="https://i.stack.imgur.com/5R6JX.png" /></p>
  
  <p>marker's left top side stick to my location. I want to see marker's bottom on the center of my location as the circle is. But i could not do it. I read react-leaflet documentation but did not see a parameter for this. If you help me, I appreciate for this. Thanks</p>
  
  <pre><code>import React, { Component } from 'react'
  import Leaflet from 'leaflet';
  import { Map, CircleMarker, TileLayer, Marker, Popup } from 'react-leaflet'
  import 'leaflet/dist/leaflet.css';
  
  import icon from 'leaflet/dist/images/marker-icon.png';
  import iconShadow from 'leaflet/dist/images/marker-shadow.png';
  
  let DefaultIcon = Leaflet.icon({
      iconUrl: icon,
      shadowUrl: iconShadow
  });
  
  Leaflet.Marker.prototype.options.icon = DefaultIcon;
  
  class SimpleExample extends React.Component {
    constructor(props) {
      super();
      this.state = {
        lat: 39.9653301,
        lng: 32.7760817,
        zoom: 5,
        markerPoint: {
          x: 320,
          y: 192
        }
      };
      this.refMap = React.createRef();
    }
  
    render() {
      const { lat, lng, zoom } = this.state;
      const position = [lat, lng];
      return (
        &lt;Map ref={this.refMap} center={position} zoom={zoom}   style={{ height: '400px', width: '100%' }}&gt;
          &lt;TileLayer
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            attribution="&amp;copy; &lt;a href=&amp;quot;http://osm.org/copyright&amp;quot;&gt;OpenStreetMap&lt;/a&gt; contributors"
          /&gt;
          &lt;Marker position={position} draggable="True" pane="popupPane" &gt;
          &lt;/Marker&gt;
          &lt;CircleMarker
          center={position}
          color='green'
          fillColor='red'
          radius={20}
          fillOpacity={0.5}
          stroke={false}
  &gt;
              &lt;Popup&gt;
                &lt;span&gt;A pretty CSS3 popup. &lt;br/&gt; Easily customizable.&lt;/span&gt;
              &lt;/Popup&gt;
        &lt;/CircleMarker&gt;
        &lt;/Map&gt;
      );
    }
  }
  
  export default SimpleExample;
  </code></pre>