Why Gatsby static image plugin does not suppot local variable for src

Question

I'm testing the gatsby-image-plugin. From the documentation, it's clearly stated that StaticImage supports local variables. But, unfortunately, when I try to use it like this, the image is not rendered. Is it because the image is out of the function scope? My code is below.

const coursesList = 
  {
    "title": "CRUD PHP and MySQL course",
    "description": "dddd",
    "link": "url",
    "image": "../../images/cover-php-course.png",
  }

export default () => {
  const img = coursesList.image

  return (

      <div>
         <StaticImage src={img} alt={coursesList.title} />
         {coursesList.title}
      </div>
    )
}

Do I really need to use GatsbyImage in this specific context? coursesList is expected to be an array of courses.