MarkerCluster markers are still showing behind cluster

I am trying to hide the markers behind my cluster and only have them show when the marker is clicked.

This is how it appears:

However when I click the cluster and exit it, it goes back to how it should look (second pic)

(This is how I want it to look originally)

This is my code:

var markers = new L.MarkerClusterGroup();



 

   
                        markers.addLayer(L.marker([currentLatitude, currentLongitude], { icon: populationIcon }).addTo(mymap).bindPopup(
                            `The population of ${thisCountry.countryName} is ${thisCountry.countryPopulation}.`));


                        markers.addLayer(capitalMarker = L.marker([currentLatitude, currentLongitude], { icon: cityIcon }).addTo(mymap).bindPopup(
                            `The capital city of ${thisCountry.countryName} is ${thisCountry.countryCapital}.`));

                        markers.addLayer(carMarker = L.marker([currentLatitude, currentLongitude], { icon: carIcon }).addTo(mymap).bindPopup(
                            `They drive on the ${thisCountry.carSide} of the road in ${thisCountry.countryName}.`));

                        //add cluster to map
                        mymap.addLayer(markers);

Answer

You are adding the created marker to the map too and this is wrong (icon: carIcon }).addTo(mymap).bindPopup().

Change

 markers.addLayer(carMarker = L.marker([currentLatitude, currentLongitude], { icon: carIcon })
  .addTo(mymap)
  .bindPopup(`They drive on the ${thisCountry.carSide} of the road in ${thisCountry.countryName}.`));

to

 markers.addLayer(carMarker = L.marker([currentLatitude, currentLongitude], { icon: carIcon })
  .bindPopup(`They drive on the ${thisCountry.carSide} of the road in ${thisCountry.countryName}.`));