React：当 Marker 在地图上单击时，MUI Card 会部分显示

Question

我有两个 React 组件：Map（父）和 ItemCard（子）。地图正在正确导入 ItemCard，因为当我单击其中一个标记时，确实会显示一些内容（“共享”和“了解更多”按钮）。但是，没有任何通过的道具出现，并且根本看不到背景或卡片。

这是我的地图组件：

function Map() {
  const { id } = useParams();
  const [lat, setLat] = useState(0);
  const [lng, setLng] = useState(0);
  const [allData, setAllData] = useState([]);
  const [isOpen, setIsOpen] = useState(false);
  const [item, setItem] = useState(null);

  window.navigator.geolocation.getCurrentPosition(
    (position) => {
      setLat(parseFloat(position.coords.latitude));
      setLng(parseFloat(position.coords.longitude));
    },
    (err) => console.log(err)
  );


  useEffect(() => {
    fetch("URL")
      .then((res) => {
        console.log(res);
        return res.json();
      })
      .then((data) => {
        console.log(data);
        setAllData(data);
      })
      .catch((e) => {
        console.log("ERROR", e);
      });
  }, [id]);

  const handleMarkerClick = (item) => {
    setItem(item);
    setIsOpen(true);
  };

  return (
    <div>
      <div>
        <form>
          <label>
            Search:
            <input
              type="text"
              onChange={(event) => {
                event.preventDefault();
                handleSearch(event);
              }}
            />
          </label>
        </form>
      </div>
      <GoogleMap
        mapContainerStyle={containerStyle}
        styles={myStyles}
        center={{ lat, lng }}
        zoom={15}
        options={{
          zoomControl: false,
          streetViewControl: false,
          mapTypeControl: false,
          fullscreenControl: false,
          styles: myStyles,
        }}
      >

          return (
            <MarkerF
              clickable={true}
              position={position}
              key={value.id}
              onClick={() => handleMarkerClick(value)}
            />
          );
        })}
        {item && (
          <ItemCard
            key={item.id}
            title={item.title}
            description={item.description}
            style={{
              position: "absolute",
              top: "50%",
              left: "50%",
              transform: "translate(-50%, -50%)",
              zIndex: 9999,
              width: "400px",
              height: "300px",
              backgroundColor: "#000000",
            }}
          />
        )}
      </GoogleMap>
    </div>
  );
}

export default Map;

现在我的 ItemCard 组件：

import * as React from "react";
import Card from "@mui/material/Card";
import CardActions from "@mui/material/CardActions";
import CardContent from "@mui/material/CardContent";
import CardMedia from "@mui/material/CardMedia";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";

export default function ItemCard(props) {
  return (
    <Card sx={{ maxWidth: 345 }}>
      <CardMedia
        key={props.id}
        sx={{ height: 140 }}
        image="https://unsplash.com/photos/lWJeGCgVbYI"
        title="green iguana"
      />
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          {props.title}
        </Typography>
        <Typography variant="body2" color="text.secondary">
          {props.description}
        </Typography>
      </CardContent>
      <CardActions>
        <Button size="small">Share</Button>
        <Button size="small">Learn More</Button>
      </CardActions>
    </Card>
  );
}

我做错了什么？单击标记时如何显示 ItemCard 的全部内容？提前致谢。