JSS Import media file returns error that Media does not exist [SC JSS+Angular]

Question

I created a custom template to be used in my content items and one of it's field is an Image field.

Also, created a content item under "data/content" using that template and supplying the correct Image>src under "data/media".

But when I deploy it shows this error:

IMPORT ERROR(S) OCCURRED!
Import media file /data/media/XXXX/XXXX/XXX.PNG does not exist in the import data.

If I am going to place the Image field under Component template no issues to be found the same as the issue that is present in the custom template.

My Custom Template:

import { CommonFieldTypes, Manifest } from '@sitecore-jss/sitecore-jss-manifest';

export default function(manifest: Manifest) {
  manifest.addTemplate({
    name: 'SocialMediaContent',
    id: 'social-media-item-template',
    icon: 'Apps/32x32/social.png',
    displayName: 'Social Media Content',
    fields: [
        { 
            name: 'SocialMediaIcon', 
            displayName: 'Social Media Icon', 
            type: CommonFieldTypes.Image, 
            section: "Icon"
        }
    ],
    inherits: ['base-link-content']
  });
}

My Yaml file:

id: social-media-item-instagram
displayName: Instagram
template: social-media-item-template
fields:
    SocialMediaIcon:
        src: /data/media/pplmedia/social/insta.PNG
        alt: instagram
    LinkTitle: Instagram
    Link:
        href: /
        title: instagram