Custom cms element SW6 - shopware

Question

I'm building a custom theme for a client and looks like I am going to have to create custom blocks and elements, but it has been a nightmare to understand how Shopware 6 works.
I copied the cms image element under my theme folder, following the directory structure that the documentation points. I did it that way to not miss any code or part I could forget or skip and then just added some new fields in it to kind of extend that new custom element. It kind of worked at the end, I also touched the twig and scss files and I could see at the frontend this new custom element. But then I tried to use the image element that comes with Shopware, but now looks like it is overriden by this new custom element I was trying to create.
Under ../custom/plugins/MyTheme/src/Resources/app/administration/src/module/sw-cms/elements/customElement/ the root index.js file which worked as I needed was:
import './component';
import './config';
import './preview';
Shopware.Service('cmsService').registerCmsElement({
name: 'image', // This is key I think but don't understand the relation.
label: 'Custom Element',
component: 'sw-cms-el-custom-element',
configComponent: 'sw-cms-el-config-custom-element',
previewComponent: 'sw-cms-el-preview-custom-element',
defaultConfig: {
media: {
source: 'static',
value: null,
required: true,
entity: {
name: 'media'
}
},
displayMode: {
source: 'static',
value: 'standard'
},
url: {
source: 'static',
value: null
},
newTab: {
source: 'static',
value: false
},
minHeight: {
source: 'static',
value: '340px'
},
verticalAlign: {
source: 'static',
value: null
},
cardColor: { // This is a new field I added
source: 'static',
value: 'true'
},
cardContent: { // This is a new field I added
source: 'static',
value: `
<h2>Lorem Ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
`.trim()
}
}
});
The code above makes my new custom element to work but then it overrides the image element entirely if I need to use that element somewhere else. I feel like the name: 'image' is the key here because then I replace it by another name let's say name: 'custom-element' and then the custom element didn't work at all, even though I copied the image element exactly as it is and just replaced it that name. The errors are related to the new fields I added, it says the values are undefined.
I have been reading some other people with the same issue and some guys talk about entities or resolvers but not sure how to follow that up.
Any advice would be appreciated. Thanks.