The left-justified list of layers does not appear in the layer control

Question

I am working with "react-leaflet": "^4.2.1", and "leaflet": "^1.9.4", in "next": "^14.1.0", when I try to add the layer controller, it doesn't The relationship of the layers appears justified on the right, I also included in the project: import "leaflet/dist/leaflet.css"; How can I solve this problem?

return (
    <LayersControl position="topright">
      {/* Base Layers */}
      {baseLayers.map((provider) => (
        <LayersControl.BaseLayer
          key={provider.name}
          name={provider.name}
          checked={provider.name === selectedBaseLayer}
        >
          <TileLayer url={provider.url} />
        </LayersControl.BaseLayer>
      ))}

      {/* Overlay Layers */}
      {overlays.map((provider) => {
        const isVisible =
          provider.zoommin === undefined ||
          provider.zoommax === undefined ||
          (currentZoom >= provider.zoommin && currentZoom <= provider.zoommax);

        return (
          <LayersControl.Overlay
            key={provider.name}
            name={provider.name}
            checked={isVisible && provider.visible}
          >
            <TileLayer url={provider.url} />
          </LayersControl.Overlay>
        );
      })}
    </LayersControl>
  );

How can I solve the problem I am having so that the list of layers appears correctly in the layer control?