I want to customize the Media Tree (modify its UI) and add additional properties to the data source. I have achieved this in the following way:

export const manifests: Array<any> = [
    {
        type: 'repository',
        alias: 'Umb.Repository.Media.Tree',
        name: 'Media Tree Repository',
        api: () => import('./media-tree.repository.js'),
    },
    {
        type: 'treeItem',
        kind: 'default',
        alias: 'Umb.TreeItem.Media.V2',
        name: 'Media Tree Item',
        element: () => import('./tree-item/media-tree-item.element.js'),
        api: () => import('./tree-item/media-tree-item.context.js'),
        forEntityTypes: 'media',
    }
];

And in the media-tree-item.element.js I changed the elementName to avoid this error : "NotSupportedError: Failed to execute 'define' on 'CustomElementRegistry': the name "umb-media-tree-item" has already been used with this registry"

const elementName = 'umb-media-tree-item-v2';
@customElement(elementName)

This works, i'm getting my new ui elements that I define in media-tree-item.element.ts and getting my new properties that i fill in the media-tree.server.data-source.ts

Problem: Sometimes it works, and sometimes it doesn't. If I refresh the page, my code occasionally appears, but other times the default Umbraco behavior is displayed.

I always have this error in the console : "Umb.Repository.Media.Tree is already registered" that i can fix changing alias: 'Umb.Repository.Media.Tree', to alias: 'Umb.Repository.Media.Tree-V2' but in that case my code stops works.

Thanks in advance.