Gatsby shows only first rendered svg

Gatsby renders only first svg image and applies it to others as well. When it has to show all of these icons (there is no problem in path) it shows it this way:

https://ibb.co/8PHfXkD

This is my code:

import Html from "../assets/skills/html.inline.svg"
import Css from "../assets/skills/css.inline.svg"
import Bird from "../assets/skills/bird.inline.svg"
import Gatsb from "../assets/skills/gatsby.inline.svg"

function Team() {
  return (
    <Layout>
      <div>
        <Html />
        <Css />
        <Js />
        <Vue />
        <Rea />
        <Gatsb />
        <Next />
        <Bird />
      </div>
    </Layout>
  )
}

export default Team

This is how I use the plugin:

{
  resolve: "gatsby-plugin-react-svg",
  options: {
    rule: {
      include: /\.inline\.svg$/,
    }
  }
}

What's the problem?