How to remove the black backgrounds when using SVGs with the Image component

[sullen atlas]

I am importing a folder with SVGs and mapping them out to Image components using an expression. The rendered SVGs on the website have a black background although the original images are transparent. How can I fix this?

---
import { Image } from "@astrojs/image/components";
const logos = await Astro.glob("../../logos/*.svg");
---
    {
      logos.map((logo) => (
        <Image
          class="col-span-2 max-h-12 lg:col-span-1"
          src={logo.default.src}
          alt="Logo"
          fit="contain"
          width={158}
          height={48}
        />
      ))
    }

[split talon]

have you tried just using the regular <img > tag?

@sullen atlas