Layers are not recognized as floor aware

[AnisBoughanmi]

I'm trying to get the floorfilter widget to work correctly in my web app. I'm very new at html and Javascript and I had to spend an entire day manipulating code and trying to get it work, and I was able to get it to recognize my site, facilities and levels layer after I correctly set those up in ArcGIS online (My org don't have indoor license btw). My only remaining issue at this point is that even if the level buttons show up after I choose a facility, I cannot get those to actually toggle between the floors. In other words, my units layers ( I have two levels in the facility, and two unit layers each representing a level) are overlaid on top of each other and the level buttons do nothing.  

I made sure to correctly set up a LEVELS_ID field in my unit layers that matches what I have on the Levels Layer, but since I'm not an experienced developer, I'm wondering if there is something wrong with my code. Or is it still something that I'm missing regarding the layer properties ?

I have attached a screenshot showing the fields of one of my two unit layers (you can see that there is a LEVELS_ID field). And here is the JS portion of my code. 

<script>
      require([
        "esri/WebMap",
        "esri/views/MapView",
        "esri/widgets/FloorFilter",
        "esri/layers/support/SiteLayerInfo",
        "esri/layers/support/FacilityLayerInfo",
        "esri/layers/support/LevelLayerInfo",
        "esri/layers/support/LayerFloorInfo",
        "esri/support/MapFloorInfo"
      ], function(WebMap, MapView, FloorFilter, SiteLayerInfo, FacilityLayerInfo, LevelLayerInfo, LayerFloorInfo, MapFloorInfo) {

        const mySiteLayerInfo = new SiteLayerInfo({
          layerId: "1919bb73fe7-layer-3", // Corrected layer ID format
          siteIdField: "SITE_ID",
          nameField: "NAME"
        });

        const myFacilityLayerInfo = new FacilityLayerInfo({
          facilityIdField: "FACILITY_ID",
          layerId: "1919bb72a3f-layer-1", // Corrected layer ID format
          nameField: "NAME",
          longNameField: "ShortName", // Adjusted field name
          siteIdField: "SITE_ID"
        });

        const myLevelLayerInfo = new LevelLayerInfo({
          facilityIdField: "FACILITY_ID",
          layerId: "1919bb73361-layer-2", // Corrected layer ID format
          levelIdField: "LEVEL_ID",
          levelNumberField: "LEVEL_NUMBER",
          longNameField: "NAME",
          shortNameField: "NAME_SHORT",
          verticalOrderField: "VERTICAL_ORDER",
          floorfield: "LEVEL_ID"
        });

        // Define LayerFloorInfo for each layer
        const floor1LayerInfo = new LayerFloorInfo({
          layerId: "1919bb756f3-layer-5", // Replace with the correct layer ID for floor 1
          floorField: "LEVEL_ID" // The level ID for floor 1
        });

        const floor2LayerInfo = new LayerFloorInfo({
          layerId: "191a068c868-layer-5", // Replace with the correct layer ID for floor 2
          floorField: "LEVEL_ID"// The level ID for floor 2
        });

        // MapFloorInfo now includes LayerFloorInfo for floor-aware layers
        const myFloorInfo = new MapFloorInfo({
          siteLayer: mySiteLayerInfo,
          facilityLayer: myFacilityLayerInfo,
          levelLayer: myLevelLayerInfo
        });

        const webmap = new WebMap({
          portalItem: {
            id: "fc95b2d47aca44d0ba4287eb8dba75b7"
          },
          floorInfo: myFloorInfo
        });

        const view = new MapView({
          container: "viewDiv",
          map: webmap
        });

        // Add the FloorFilter widget when the view is ready
        view.when(() => {
          const floorFilter = new FloorFilter({
            view: view
          });

          view.ui.add(floorFilter, "top-trailing");
        });
      });
    </script>

I'm getting overwhelmed with this, so I will appreciate any help or assistance. Thanks.