css – When i attempt to open up modal every little thing that makes with api on the history is eliminated

im attempting to develop a modal that reveals a sneak peek a product originating from an api yet whenever i attempt to click among the made aspect originating from the api modal turns up yet every little thing got rid of from the history can you please assist?

App.jsx

 import {useEffect, useState} from 'respond';.
import {Card} from './ Card';.
import png from './ src/assets/folder-icon. png';.
import ModalOverlay from './ ModalOverlay';.

feature Application() {
const [data, setData] = useState([]);.
const [wholeData, setWholeData] = useState([]);.
const [isOpen, setIsOpen] = useState( incorrect);.
const [modalOpen, setModalOpen] = useState( incorrect);.

useEffect(() => > {
bring(' http://localhost:3000/data')
. after that(( res) => > res.json())
. after that(( information) => > {
setData( information);.
setWholeData( information);.
} );.
}, []);.

const handleClick = (obj) => > {
setData( obj);.
setIsOpen( real);.
};.

const closeModal = (obj) => > {
setIsOpen( incorrect);.
};.

const CardList = () => > {
return (.
<< div className=" version">
> {information?. metadata?. map(( obj) => > (.
<< div secret= {obj.objectId} >>.
<< div.
className=" switch modelCard".
onClick= {() => > handleClick( obj)}
secret= {obj.objectId}
>>.
<< img className=" card-img" src= {png} alt=" png"/>>.
<.
<.
))}
<.
);.
};.

return (.
<< div className=" Application">
> {information && <& & < CardList/ >}
{isOpen && & &(.
< ModalOverlay. isOpen= {isOpen}
obj= {information}
wholeData= {wholeData}
closeModal= {<.
closeModal}/ >.
)} .);.} export default Application;. 

ModalOverlay.jsx

 import React, {useState, useEffect} from' respond';. const ModalOverlay=( {obj, wholeData, isOpen, closeModal}

)= > {return(. < div className=" modal-overlay">
<> < div className=" modal-content" onClick= {(e) => > e.stopPropagation()} >>.
<< div className=" card-img">
<> < h2 className=" card-title">
> Item Call: {obj.properties.General.Name}
<.
<< img.
className=" object-image"
src= {'information: image/jpeg; base64,$ {wholeData.thumbnail} '}
alt=" object-image"
/>>.
<< switch className=" view-360-btn">> Go 360 Sight<.
<< switch onClick= {closeModal} >> Kapat<.
<.
<.
<.
);.
};.

export default ModalOverlay;.

index.css

: origin {
line-height: 1.5;.
color-scheme: light dark;.
shade: black;.
background-color: # 333;.
}

body {
font-family: 'Karla', sans-serif;.
screen: flex;.
min-width: 320px;.
min-height: 100vh;.
}

ul {
list-style-type: none;.
extra padding: 0;.
}

img {
max-width: 100%;.
}

#root {
elevation: 100vh;.
size: 100vw;.
}

/ * CARD CHECKLIST */

. version {
screen: grid;.
justify-content: facility;.
align-content: facility;.
text-align: facility;.
extra padding: 2em;.
grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr));.
space: 2.5 em;.
}

. modelCard {
screen: flex;.
flex-direction: column;.
justify-content: facility;.
border-radius: 10px;.
arrow: guideline;.
background-color: #f 3f3f3;.
shift: 100ms;.
}

. modelCard: float {
change: translateY( -1.3 em);.
}

/ * CARD PARTICULARS */

. card {
min-height: 100vh;.
screen: flex;.
justify-content: facility;.
}

. card-details {
shade: white;.
background-color: # 0c2046;.
screen: flex;.
flex-direction: column;.
extra padding: 1.2 em;.
}

. card-title {
text-align: facility;.
shade: white;.
margin-top: 0;.
margin-bottom: 0.5 em;.
}

. card-img {
screen: flex;.
flex-direction: column;.
}

. view-360-btn {
extra padding: 1em 2em;.
boundary: none;.
border-bottom-right-radius: 5px;.
border-bottom-left-radius: 5px;.
background-color: lightgreen;.
shade: black;.
font-size: 0.9 em;.
arrow: guideline;.
font-weight: strong;.
}

. view-360-btn: float {
background-color: # 6ff36f;.
}

. object-detail-image {
border-top-right-radius: 5px;.
border-top-left-radius: 5px;.
size: 450px;.
elevation: 450px;.
}

. detail-section {
screen: flex;.
flex-direction: column;.
text-align: facility;.
}

. detail-title {
margin-bottom: 0;.
}

. information {
screen: flex;.
justify-content: space-between;.
}

. detail-name {
font-size: 1.2 em;.
font-weight: strong;.
}

. detail-value {
font-size: 1.1 em;.
font-weight: 500;.
}

/ * CARD SNEAK PEEK */.

/ * Modal açıldığında arka planı karartmak için modal-overlay kullanıyoruz */
. modal-overlay {
setting: taken care of;.
top: 0;.
left: 0;.
size: 100%;.
elevation: 100%;.
background-color: rgba(.
0,.
0,.
0,.
0.5.
);/ * Karartma için yarı saydam bir arka strategy */.
screen: flex;.
justify-content: facility;.
align-items: facility;.
computer animation: fadeIn 100ms ease-in;/ * 100ms açılış animasyonu */.
}

@keyframes fadeIn {
from {
opacity: 0;.
}
to {
opacity: 1;.
}
}

. Application {
min-height: 100vh;.
min-width: 320px;.
}

Just how can i provide components that originating from the api on the history while modal is open