Link custom traits to my custom blocks

Hi, i have created a custom traits and custom blocks but i try to link my blocks in traits, it does not shows in settings option

my custom blocks

 editor.BlockManager.add('ion-segment', {
      id: 'ion-segment',
      label: `<svg  width="443px" height="70px" viewBox="0 0 150 100" enable-background="new 0 0 128 128"  id="Layer_1" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g><path d="M85.263,46.49L54.485,77.267L42.804,65.584c-0.781-0.782-2.047-0.782-2.828-0.002c-0.781,0.782-0.781,2.048,0,2.829    l14.51,14.513l33.605-33.607c0.781-0.779,0.781-2.046,0-2.827C87.31,45.708,86.044,45.708,85.263,46.49z M64.032,13.871    c-27.642,0-50.129,22.488-50.129,50.126c0.002,27.642,22.49,50.131,50.131,50.131h0.004c27.638,0,50.123-22.489,50.123-50.131    C114.161,36.358,91.674,13.871,64.032,13.871z M64.038,110.128h-0.004c-25.435,0-46.129-20.694-46.131-46.131    c0-25.434,20.693-46.126,46.129-46.126s46.129,20.693,46.129,46.126C110.161,89.434,89.471,110.128,64.038,110.128z"/></g></g>
        <div>ion-segment</div>
</svg>`,
      category: 'Forms',
      content: `<div style="padding-top:10px;padding-bottom:10px;padding-left:10px;padding-right:10px">
      <ion-segment data-gjs-type="segment-type" color="blue" class="segment segment-md segment-md-blue ng-valid ng-touched ng-dirty" ng-reflect-color="blue"
    ng-reflect-model="regular">
    <ion-segment-button class="segment-button" role="button" tappable="" value="regular" ng-reflect-value="regular"
      aria-pressed="true" style="transition: none 0s ease 0s;">
      <span>Regular</span>
      <div class="button-effect" style="transform: translate3d(242px, -103px, 0px) scale(1); height: 240px; width: 240px; opacity: 0; transition: transform 488ms ease 0s, opacity 342ms ease 146ms;"></div>
    </ion-segment-button>
    <ion-segment-button class="segment-button" role="button" tappable="" value="pinerest" ng-reflect-value="pinerest"
      aria-pressed="false">
      <span>Pinterest</span>
      <div class="button-effect" style="transform: translate3d(196px, -103px, 0px) scale(1); height: 240px; width: 240px; opacity: 0; transition: transform 488ms ease 0s, opacity 342ms ease 146ms;"></div>
    </ion-segment-button>
  </ion-segment></div>`,
      // activeOnRender: 1,
      classes: ['segmentLabel'],

      draggable: true,
      removable: true
    })

my custom traits

 comps.addType('segment-type', {
model: defaultModel.extend({
        // Extend default properties
        defaults: Object.assign({}, defaultModel.prototype.defaults, {
          // Can be dropped only inside `form` elements
          draggable: '*',
          // Can't drop other elements inside it
          droppable: true,
          script: function () {
            var segmentButton = document.getElementsByTagName('ion-segment-button');
            btn1 = segmentButton[segmentButton.length - 2];
            btn2 = segmentButton[segmentButton.length - 1];
            btn1.onclick = function () {
              btn1.classList.add("segment-activated");
              btn2.classList.remove("segment-activated");
            }
            btn2.onclick = function () {
              btn2.classList.add("segment-activated");
              btn1.classList.remove("segment-activated");
            }
          },
          // Traits (Settings)
          traits: [{
            type: 'text',
            label: 'segmentButton1',
            placeholder: 'Regular',
            name: 'segmentButton1',
            changeProp: 1
          }, {
            type: 'text',
            label: 'segmentButton2',
            placeholder: 'Urgent',
            name: 'segmentButton2',
            changeProp: 1
          }],
        }),
        // toHTML: function () {},
        init() {
          this.listenTo(this, 'change:segmentButton1', this.firstButton);
          this.listenTo(this, 'change:segmentButton2', this.secondButton);
        },
        firstButton() {
          console.log('default editor get component area ---------   ', editor.getSelected())
          //do something 
          // var segmentButton = document.getElementsByTagName('ion-segment-button');
          // btn1 = segmentButton[segmentButton.length - 2];
        },
        secondButton() {
          // var segmentButton = document.getElementsByTagName('ion-segment-button');
          // btn2 = segmentButton[segmentButton.length - 1];
        },

      }, {
        isComponent: function (el) {
          if (el.tagName == 'ION-SEGMENT-BUTTON') {
            return {
              type: 'segment-type'
            };
          }
        },
      }),

      // Define the View
      view: defaultType.view,
    });

can anyone please help me

Thanks