OpenLayers Scale Line not showing on the map

I am trying to generate a scale line on my map using ScaleLine but it is not showing on the map.

//Scale
import {defaults as defaultControls, ScaleLine} from 'ol/control';

map = new Map({
      target: 'map-container',
      controls: defaultControls().extend([
        new ScaleLine()
      ]),
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        projection: 'EPSG:4326',
        center: [114.190750, 22.339914],
        zoom: 12,
        minZoom: 12,
      }),
    });