React leaflet can't delete zoomControl

Question

I'm using react-leaflet version 3.2.5 and I can't seem to disable the map's native zoomControl. The propety zoomControl={false} disable the component ...

In some video, people use this method for disable the native ZoomControl.

If I use zoomControl={true} then, I have two component .

Here is my code:

      <MapContainer
        center={[14.7, -14.75]}
        zoom={7.5} 
        scrollWheelZoom={true}
        style={{height: "100%", width: "100%"}}
        gestureHandling={true}
        zoomControl={false}
      >
      <ZoomControl position='topleft' />
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
        {elements.map(el =>
          <Marker 
            position={[el.latitude,el.longitude]}
            icon={getIcon(el.pin)}
          >
            <Popup>
             hi
            </Popup>
          </Marker>
          )}
      </MapContainer>