Creating Custom Remote Image Node from a Json File in Gatsby v5

Question

I am new to gatsby and trying to create Child Image sharp nodes from json objects with online image url and I tried to follow this tutorial on gatsby site text. So, what I tried : I loaded the json file located in /src/data/ folder and I included the path in gatsby-source-filesystem and also installed and add gatsby-transformer-json to config.js after installing it. Then in gatsby-node.js I used this code:

const { createRemoteFileNode } = require("gatsby-source-filesystem")

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions

  createTypes(`
    type CourseJson implements Node @dontInfer {
      course: Course
      imageData: File @link(from: "fields.localFile")
    }

    type Course {
      title: String!
      image: String
    }
  `)
}

exports.onCreateNode = async ({
                                node,
                                actions: { createNode, createNodeField },
                                createNodeId,
                                getCache,
                              }) => {
  // For all MarkdownRemark nodes that have a featured image url, call createRemoteFileNode
  if (
      node.internal.type === "CourseJson" &&
      node.course.image  !== null
  ) {
    const fileNode = await createRemoteFileNode({
      url: node.course.image, // string that points to the URL of the image
      parentNodeId: node.id, // id of the parent node of the fileNode you are going to create
      createNode, // helper function in gatsby-node to generate the node
      createNodeId, // helper function in gatsby-node to generate the node id
      getCache,
    })

    // if the file was created, extend the node with "localFile"
    if (fileNode) {
      createNodeField({ node, name: "localFile", value: fileNode.id })
    }
  }
}

content of the courses.json file:

enter image description here

content of the gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: `DesignCode`,
    description: `Learn Code for Designers.`,
    author: `@Mengto`,
    siteUrl: `https://designcode.io/`,
  },
  plugins: [
    `gatsby-transformer-json`,

    {
      resolve: `gatsby-source-filesystem`,
      options:
          {
            name:`DataJson`,
            path: `${__dirname}/src/data/`,
          },
    },
    `gatsby-plugin-image`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options:
          {
            name: `images`,
            path: `${__dirname}/src/images`,
          },
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `design-code-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/logo-designcode.svg`,
      },
    },
  ],
}

My issue is in graphql the CourseJson and allCourseJson nodes are null but I have a another node courses which have content of the json file. I need the allCourseJson node to contain the json data and also the remote image so I can use child image sharp node on it.

I tried different custom schema definitions and different Json structures , I looked on many sources on the internet to solve this issue but there is not any straitforward answer related to how I can simply create node files from image url in a json file. I also want to understand how to scale this approach for complex types. Your help is very appreciated.