Black outlines on tab hover

[codedbyjordan]

Description

I'm using this plugin with Gatsby v3 but for some reason I am getting black outlines whenever I hover over another tab

I'm not sure if anything is wrong with my code, or if it's the plugin itself. I removed the CSS to no avail, so that can't be the problem.

const ImageSlider = (props) => {

  const [sliderIndex, setSliderIndex] = useState(0);
  const images = ['../images/1.png', '../images/2.png']

  const {backgroundImage} = useStaticQuery(graphql`
    query {
      backgroundImage: file(relativePath: {eq: "1.png"}) {
        id
        childImageSharp {
          gatsbyImageData(
            width: 1360,
            quality: 50,
            webpOptions: {quality: 70}
          )
        }
      }
    }
  `)

  const image = getImage(backgroundImage)
  const bg = convertToBgImage(image)

  return (
    <div className={styles.imgSlider}>
      <BackgroundImage Tag="section" {...bg} className={styles.bgImg}>
        {props.children}
      </BackgroundImage>
    </div>
  )
}

Environment

System: OS: Windows 10 10.0.19042 CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
Binaries: Node: 14.15.3 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD npm: 6.14.9 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.64) npmPackages: gatsby: ^3.6.2 => 3.8.1 gatsby-background-image: ^1.5.3 => 1.5.3 gatsby-image-background-slider: ^0.0.4 => 0.0.4 gatsby-plugin-gatsby-cloud: ^2.8.1 => 2.8.1 gatsby-plugin-image: ^1.9.0 => 1.9.0 gatsby-plugin-mdx: ^2.8.0 => 2.8.0 gatsby-plugin-prefetch-google-fonts: ^1.4.3 => 1.4.3 gatsby-plugin-sharp: ^3.9.0 => 3.9.0 gatsby-source-filesystem: ^3.9.0 => 3.9.0 gatsby-transformer-sharp: ^3.9.0 => 3.9.0