如何将react-bootstrap carousel与gatsby-image一起使用？

npm install react-bootstrap gatsby-image

import React from "react";
import { Carousel } from "react-bootstrap";
import { graphql, useStaticQuery } from "gatsby";
import Img from "gatsby-image";

const data = useStaticQuery(graphql`
  query {
    allFile(filter: { extension: { regex: "/(jpg|jpeg|png)/" } }) {
      edges {
        node {
          id
          childImageSharp {
            fluid(maxWidth: 800) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`);

const CarouselComponent = () => {
  return (
    <Carousel>
      {data.allFile.edges.map((edge) => (
        <Carousel.Item key={edge.node.id}>
          <Img fluid={edge.node.childImageSharp.fluid} />
        </Carousel.Item>
      ))}
    </Carousel>
  );
};

const YourPage = () => {
  return (
    <div>
      {/* 其他内容 */}
      <CarouselComponent />
      {/* 其他内容 */}
    </div>
  );
};