我正在做一个项目，应该有两个不同的网页和移动的布局.对于网页，我想在一个网格MUI卡，而在移动，我想一个引导转盘.我目前正在尝试这个：

import React from "react";

import { projects } from "../data";
import ScreenDetection from "../tools/screenDetection";

import "animate.css/animate.min.css";

import { DesktopComputerIcon } from "@heroicons/react/solid";
import { AnimationOnScroll } from 'react-animation-on-scroll';
import Card from '@mui/material/Card';
import CardMedia from '@mui/material/CardMedia';
import { CardActionArea } from '@mui/material';
import { Carousel } from 'react-bootstrap';

export default function Projects() {

  let projectList;

  if (ScreenDetection() === false) {
    projectList =
      <div className="grid grid-cols-2 gap-6">
        {projects.map((project) => (
          <Card sx={{ width: 1, height: 250 }}>
            <CardActionArea>
              <CardMedia
                sx={{ 
                  height: 250,
                  ':hover': {
                    borderRadius: "20px", // theme.shadows[20]
                  },
                }}
                image={project.image}
                title="green iguana"
              />
            </CardActionArea>
          </Card>
        ))}
      </div>
  } else {
    console.log("MOBILE HERE")
    projectList = 
      <div>
        <Carousel>
          {projects.map(project => (
            <Carousel.Item>
              <img
                className="d-block w-100"
                src={project.image}
                alt={project.title}
              />
              <Carousel.Caption>
                <h3>{project.title}</h3>
                <p>{project.subtitle}</p>
              </Carousel.Caption>
            </Carousel.Item>
          ))}
        </Carousel> 
      </div>       
  }
  return (
    ...
  )

在返回函数中引用它：

<div>
          {projectList}
        </div>

但结果似乎是这样的

你知道为什么会这样吗？谢谢！