magento 2 custom component at checkout-step-shipping as shipping address child

I trying to add a custom template @ checkout between form customer login and shipping address inside div id=”checkout-step-shipping” there are 2 forms : enter image description here

I’ve tried a few thing like ‘before-form’ etc.. I’ve manage to add before and after everything following this :https://devdocs.magento.com/guides/v2.2/howdoi/checkout/checkout_new_step.html But Not able to add in between! Here is my xml :

...<referenceBlock name="checkout.root">         <arguments>             <argument name="jsLayout" xsi:type="array">                 <item name="components" xsi:type="array">                     <item name="checkout" xsi:type="array">                         <item name="children" xsi:type="array">                             <item name="steps" xsi:type="array">                                 <item name="children" xsi:type="array">                                     <item name="shipping-step" xsi:type="array">                                         <item name="children" xsi:type="array">                                             <item name="shippingAddress" xsi:type="array">                                                 <item name="children" xsi:type="array">                                                     <item name="MYCUSTOMHTML" xsi:type="array">                                                         <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-address/MYCUSTOMCOMPONENT</item>                                                         <item name="sortOrder" xsi:type="string">1</item>                                                     </item>                                                 </item>                                             </item>                                         </item>                                     </item>                                 </item>                             </item>                         </item>                     </item>                 </item>             </argument>         </arguments>     </referenceBlock>... 

Here is my component :

define( [     'uiComponent',     'jquery',     'Magento_Checkout/js/model/step-navigator',     'Magento_Checkout/js/model/quote',     'Magento_Ui/js/modal/alert',     'Magento_Ui/js/modal/modal',     'ko' ], function (Component, $  , stepNavigator, quote, alert, modal, ko) {     'use strict';     return Component.extend({         defaults: {             template: 'Magento_Checkout/shipping-address/MYCUSTOMCOMPONENT'         },         initialize: function () {             this._super();             console.log('LOADED!');         }     }) } 

);

My html:

<div>TEST TEST TESTE</div> 

This works I console.log LOADED but the html does not gets added!

Does anyone have any idea I ma not sure why the html not showing up as the component loads! any help Appreciate thanks!