Can't add cloudinary media library - Images via graphql are null

[ghost]

Bug report

What is the current behavior?
After configuring cloudinary media library for images, when an image is selected from cloudinary, markdown value becomes an absolute URL and it disappears from graphql queries (or better, image value is null).

If the current behavior is a bug, please provide the steps to reproduce.
cloned the repo and added cloudinary configuration in Netlify cms config.yml.
When building, error is displayed:
TypeError: Cannot read property 'childImageSharp' of null

What is the expected behavior?
image should be processed by Gatsby

Other relevant information:
System info

System:
    OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 14.15.4 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.10 - /usr/local/bin/npm
  Browsers:
    Chrome: 88.0.4324.150
  npmPackages:
    gatsby: ^2.32.3 => 2.32.3
    gatsby-image: ^2.3.5 => 2.11.0
    gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1
    gatsby-plugin-manifest: ^2.12.0 => 2.12.0
    gatsby-plugin-netlify: ^2.11.0 => 2.11.0
    gatsby-plugin-netlify-cms: ^4.9.0 => 4.9.0
    gatsby-plugin-react-helmet: ^3.2.5 => 3.10.0
    gatsby-plugin-sass: ^2.2.4 => 2.8.0
    gatsby-plugin-sharp: ^2.5.7 => 2.14.1
    gatsby-remark-copy-linked-files: ^2.2.4 => 2.10.0
    gatsby-remark-images: ^3.2.6 => 3.11.0
    gatsby-remark-relative-images: ^2.0.2 => 2.0.2
    gatsby-source-filesystem: ^2.2.5 => 2.11.0
    gatsby-transformer-remark: ^2.7.5 => 2.16.0
    gatsby-transformer-sharp: ^2.4.7 => 2.12.0
  npmGlobalPackages:
    gatsby-cli: 2.19.1

config.yml

backend:
  name: git-gateway
  branch: master
  commit_messages:
    create: 'Create {{collection}} “{{slug}}”'
    update: 'Update {{collection}} “{{slug}}”'
    delete: 'Delete {{collection}} “{{slug}}”'
    uploadMedia: '[skip ci] Upload “{{path}}”'
    deleteMedia: '[skip ci] Delete “{{path}}”'

media_folder: static/img
public_folder: /img

media_library:
  name: cloudinary
  config:
    cloud_name: xxx
    api_key: xxx

collections:

..don't want to copy all file since it is not relevant..

cms.js file:

import CMS from 'netlify-cms-app'
import cloudinary from 'netlify-cms-media-library-cloudinary'

// import AboutPagePreview from './preview-templates/AboutPagePreview'
import BlogPostPreview from './preview-templates/BlogPostPreview'
// import ProductPagePreview from './preview-templates/ProductPagePreview'
// import IndexPagePreview from './preview-templates/IndexPagePreview'

CMS.registerMediaLibrary(cloudinary)

// CMS.registerPreviewTemplate('index', IndexPagePreview)
// CMS.registerPreviewTemplate('about', AboutPagePreview)
// CMS.registerPreviewTemplate('products', ProductPagePreview)
CMS.registerPreviewTemplate('blog', BlogPostPreview)

image value in markdown file after selecting an image from cloudinary:
image: https://res.cloudinary.com/xxx/image/upload/v1613039158/lemurs_xysf6i.png

Error when running gatsby build

 ERROR #95313 

Building static HTML failed for path "/about/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  20 |                 <Img
  21 |                   className='about-image max-w-50 mx-auto'
> 22 |                   fluid={about.frontmatter.image.childImageSharp.fluid}
     |                                                  ^
  23 |                 />
  24 |               </div>
  25 |


  WebpackError: TypeError: Cannot read property 'childImageSharp' of null

Node.js version: v14.15.4
NPM/Yarn version 6.14.10
Operating System: Ubuntu
Additional tools: