how to display geojson data on a leaflet map javascript

I am trying to display the coordinates I have saved in JSON format on a leaflet map. Neither the marker of the coordinates is showing nor am I getting any error. here is my geojson data and the code that should display the records on the map. Where might I be doing it wrong? am using leaflet 1.9.4 cdn css and js links

here is the code in the script

// map scripts

    var defaultLocation = [-1.286389,36.817223]

    var map = L.map('map')
        .setView(defaultLocation, 13);
        //.center(defaultLocation);
    
    var tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

    var marker = new L.Marker([-1.2787474907651892,36.821225881576545]);
    marker.addTo(map);

var geoJsondata = {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "properties": {
                    "name": "Example 1",
                    "amenity": "Baseball Stadium",
                    "iconSize": [50, 50],
                    "locationId": 1,
                    "image": "https://images.unsplash.com/photo-1688976694262-89230d6133ba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3fHx8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
                    "popupContent": "This is where the Rockies play!"
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [-1.2822121651282061, 36.82157993316651]
                }
            },
            {
                "type": "Feature",
                "properties": {
                    "name": "Example 2",
                    "amenity": "Baseball Stadium",
                    "iconSize": [50, 50],
                    "locationId": 2,
                    "image": "https://images.unsplash.com/photo-1688728981543-df24d24d0116?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNXx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
                    "popupContent": "This is where the Rockies play!"
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [-1.2842580516508735, 36.816703677177436]
                }
            },
            {
                "type": "Feature",
                "properties": {
                    "name": "Example 3",
                    "amenity": "Baseball Stadium",
                    "iconSize": [50, 50],
                    "locationId": 3,
                    "image": "https://images.unsplash.com/photo-1688966838599-05e6cf6628cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzMnx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
                    "popupContent": "This is where the Rockies play!"
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [-1.2815256914612605, 36.81707382202149]
                }
            }
            
        ]
    }

    L.geoJSON(geoJsondata).addTo(map);