在 React js 项目中自动复制 div 下的元素

Question

我正在使用 React js 项目和 TMDB Api 创建电影应用程序。单击电影图标时，将显示详细信息页面。 但是在容器下写的东西会自动复制到网页中。在检查时我可以看到两个带有容器元素的 div 类它是怎么来的，我该如何解决这个问题？

import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { API_KEY, imageUrl } from "../../constants/constants";
import baseUrls from "../../BaseUrls";
import YouTube from "react-youtube";
import "./Details.css";
import Button from "react-bootstrap/Button";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";

function Details() {
  const { id } = useParams();
  const [detailMovie, setDetailMovie] = useState("");

  const [youid, setYouId] = useState(null);

  useEffect(() => {
    baseUrls
      .get(`movie/${id}?api_key=${API_KEY}&language=en-US`)
      .then((response) => {
        console.log(response.data);
        setDetailMovie(response.data);
      });
  }, [id]);
  const handleMovie = (detailMovie) => {
    console.log(detailMovie.id);
    baseUrls
      .get(`/movie/${detailMovie.id}/videos?api_key=${API_KEY}&language=en-US`)
      .then((response) => {
        if (response.data.results.length !== 0) {
          setYouId(response.data.results[0]);
        } else {
          console.log("array empty");
        }
      });
  };
  const opts = {
    height: "390",
    width: "100%",
    playerVars: {
      autoplay: 1,
    },
  };

  return (
    <Container>
      <Row>
        <Col sm={8}></Col>
        <h1>{detailMovie.title}</h1>
        <h2>{detailMovie.release_date}</h2>
        <h2>{detailMovie.vote_average}</h2>
        <h2>{detailMovie.overview}</h2>
        <h2>india</h2>

        <Col sm={4}></Col>
      </Row>
    </Container>
  );
}

export default Details;