Гэтсби: img является пустым тегом элемента и не должен иметь ни «дочерних элементов», ни использовать «dangerouslySetInnerHTML»

Я пытаюсь создать компонент с Gatsby Js, который включает импортированное изображение. Однако, когда ссылка добавляется с HTML-тегом привязки, я получаю img is a void element tag and must neither havechildrennor usedangerouslySetInnerHTML`.

Без <a> ... </a> такой ошибки нет.

Мой код:

import React from "react"
import medium from "../images/medium.png"


const Socials = () => (
    <div>
        <a href = "https://medium.com"> <img src = {medium}> </img> </a>
    </div>
)
export default Socials

Трассировки стека:

  in img (at Socials.js:8)
    in a (at Socials.js:8)
    in div (at Socials.js:7)
    in Socials (at pages/index.js:44)
    in IndexPage (created by HotExportedIndexPage)
    in AppContainer (created by HotExportedIndexPage)
    in HotExportedIndexPage (created by PageRenderer)
    in PageRenderer (created by JSONStore)
    in JSONStore (created by RouteHandler)
    in RouteHandler (created by EnsureResources)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (created by EnsureResources)
    in ScrollContext (created by EnsureResources)
    in RouteUpdates (created by EnsureResources)
    in EnsureResources (created by LocationHandler)
    in LocationHandler (created by LocationProvider)
    in LocationProvider (created by Context.Consumer)
    in Location (created by Root)
    in Root
    in _default

Как правильно добавить URL-ссылку к изображению?