I am new to Leaflet and I'm trying to add the Control Search in my map but I encounter this error

Uncaught TypeError: L.Control.geocoder is not a function

I already added these links

<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>

I initialized my map

var map = L.map('map').setView([40.71455, -74.00712], 10);

Then added basemap

var dark_matrix = L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png', {
minZoom: 3,
maxZoom: 20,
attribution: '&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
});
dark_matrix.addTo(map);

Add the control like this

L.Control.geocoder().addTo(map);

I also tried this one

var searchControl = L.Control.geocoder();
searchControl.addTo(map);

But still does not work.

Here is the jsfiddle of the project https://jsfiddle.net/mgy01hwx/1/