How to use the ember-leaflet/components/interactive-layer.extend function in ember-leaflet

import { observer } from '@ember/object';
import InteractiveLayer from 'ember-leaflet/components/interactive-layer';
import DraggabilityMixin from 'ember-leaflet/mixins/draggability';
import DivOverlayableMixin from 'ember-leaflet/mixins/div-overlayable';
import toLatLng from 'ember-leaflet/macros/to-lat-lng';

export default InteractiveLayer.extend(DraggabilityMixin, DivOverlayableMixin, {

  leafletRequiredOptions: Object.freeze([
    'location'
  ]),

  leafletOptions: Object.freeze([
    'icon', 'clickable', 'draggable', 'keyboard', 'title',
    'alt', 'zIndexOffset', 'opacity', 'riseOnHover', 'riseOffset'
  ]),

  leafletEvents: Object.freeze([
    'dragstart', 'drag', 'dragend', 'move', 'moveend',
    'remove', 'add', 'popupopen', 'popupclose'
  ]),

  leafletProperties: Object.freeze([

import InteractiveLayer from 'ember-leaflet/components/interactive-layer';
import DivOverlayableMixin from 'ember-leaflet/mixins/div-overlayable';
import StyleMixin from 'ember-leaflet/mixins/style';

export default InteractiveLayer.extend(DivOverlayableMixin, StyleMixin, {

  leafletOptions: Object.freeze([
    'stroke', 'color', 'weight', 'opacity', 'fill', 'fillColor',
    'fillOpacity', 'fillRule', 'dashArray', 'lineCap', 'lineJoin',
    'clickable', 'pointerEvents', 'className'
  ]),

  leafletEvents: Object.freeze([
    'add', 'remove', 'popupopen', 'popupclose'
  ])
});

import { deprecate } from '@ember/application/deprecations';
import { isPresent } from '@ember/utils';
import InteractiveLayer from 'ember-leaflet/components/interactive-layer';

export default InteractiveLayer.extend({

  leafletRequiredOptions: Object.freeze([
    'url', 'bounds'
  ]),

  leafletOptions: Object.freeze([
    'opacity', 'alt', 'crossOrigin',
    'errorOverlayUrl', 'zIndex', 'className'
  ]),

  leafletProperties: Object.freeze([
    'url', 'opacity', 'bounds'
  ]),

  leafletEvents: Object.freeze([
    'load', 'error'