Leaflet: distorted small circles

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
<div id="map"></div>

CSS

#map {
  height: 400px;
}

JavaScript

// center of the map
var center = [-33.8650, 151.2094];

// Create the map
var map = L.map('map', {maxZoom: 30}).setView(center, 24);

L.circle(center, {radius: 0.1}).addTo(map);
L.circle([-33.865002, 151.2094], {radius: 0.1}).addTo(map);
L.circle([-33.865004, 151.2094], {radius: 0.1}).addTo(map);
L.circle([-33.865006, 151.2094], {radius: 0.1}).addTo(map);
L.circle([-33.865008, 151.2094], {radius: 0.1}).addTo(map);
L.circle(center, {radius: 0.5}).addTo(map);
L.circle(center, {radius: 1}).addTo(map);