Custom traits not showing up

I am trying to make custom traits following the guidelines from Grapesjs Trait manager, and I have been through previous issues but the traits don't show up.

Expected result: custom traits like the ones below to show up. Actual result: default traits like id and title show up.

Currently, I'm using the trait manager website example code to test as shown below.

editor.DomComponents.addType('count', {
model: {
      defaults: {
        traits: [
          // Strings are automatically converted to text types
          'name', // Same as: { type: 'text', name: 'name' }
          'placeholder',
          {
            type: 'select', // Type of the trait
            label: 'Type', // The label you will see in Settings
            name: 'type', // The name of the attribute/property to use on component
            options: [
              { id: 'text', name: 'Text'},
              { id: 'email', name: 'Email'},
              { id: 'password', name: 'Password'},
              { id: 'number', name: 'Number'},
            ]
          }, {
            type: 'checkbox',
            name: 'required',
        }],
        // As by default, traits are binded to attributes, so to define
        // their initial value we can use attributes
        attributes: { type: 'text', required: true },
      },
    },
    });
    
editor.BlockManager.add( 'count', 
{	
label: 'count',	
category: 'Extra',	
content: '<div id="customdiv"></div>',	
attributes: {class:'fa fa-clock-o'},
});

Thank you for your help in advance. Please let me know if I need to provide more information.