How can I specify position of dropped element ?

after dropping the header block into the canvas, I need it to go at top of any other component/block. currently, I am doing this. but it is not working. 

editor.on('canvas:drop',(DataTransfer, model)=> {
   if (model.is('header')) { 
      var index = 0;
      editor.getComponents().add(model, {at: index});
        }
})

@artf  thanks for the reply. I don't know if it is correct way but I did something and it worked for me. I am quite new at this and still learning from docs.

I did this- 

editor.on('canvas:drop',( model)=> {
   if (model.is('header')) {      //created custom component type header
      const wrapper = editor.getWrapper();
      const el = wrapper.find('header')[1];   //checking if header already exist
      if(el==undefined){
      var wrapperChildren = editor.DomComponents.getComponents();
       var index = 1;
      wrapperChildren.add({ tagName:'div', attributes:{id: 'header'}, components: [model] }, {at: index});
      }
      else{
         el.remove();
         alert('header already exist');
      }
        }
   
})

Thanks again!