StaticImage is not working inside array of image paths

[dohoangn]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

I have simple array of strings contain image names and try to use StaticImage to display image but not working
import React from "react";
import { Container } from "react-bootstrap";

import Layout from "../components/layout";
import { StaticImage } from "gatsby-plugin-image";

const carLogos = [
"acura.gif",
"alfa-romeo.gif"
];
const logo = "acura.gif";

const IndexPage = () => (


{carLogos.map((l) => (

<StaticImage src={"../images/car-logo/" + l} alt="Trust Us" />

))}


);

export default IndexPage;

However if I change <StaticImage src={"../images/car-logo/" + logo} alt="Trust Us" /> which refer to variable, not array, then it is working

Reproduction Link

https://donthaveone

Steps to Reproduce

copy this IndexPage and run server

Expected Result

Images should render

Actual Result

Images aren't shown

Environment

Windows, Mac

Config Flags

No response

[LekoArts]

Please see #31760