Why some HTML elements are disappeared after importing a particular component in React.js?

My components tree is like: <App/> => <Art/> => <Gallery/>.
Gallery is imported in Art & Art is imported in App component. I have a container in my Art component that shows fine until I import Gallery component.
When I import Gallery it disappears it is only happening with Gallery component.
With other components its working fine.
No errors in console.
my Gallery component:

import "./gallery.scss";
import { useState } from "react";
import { Close } from "@material-ui/icons";
import { data } from "../../imgData";
export default function Gallery() {
  const [artContainer, setArtContainer] = useState(false);
  const [artSrc, setArtSrc] = useState("");

  const openImg = (imgSrc) => {
    setArtSrc(imgSrc);
    setArtContainer(true);
  };
  return (
    <>
      <div className={artContainer ? "art-container open" : "art-container"}>
        <div className="icons">
          <a href={artSrc} download={artSrc}>
            <img className="icon_" src="assests/download.svg" alt="download" />
          </a>

          <Close className="icon_" onClick={() => setArtContainer(false)} />
        </div>

        <img src={artSrc} alt="" />
      </div>
      <div className="gallery" id="gallery">
        {data.map((d) => (
          <div key={d.id} className="art" onClick={() => openImg(d.imgSrc)}>
            <img src={d.imgSrc} alt="" />
          </div>
        ))}
      </div>
    </>
  );
}