При нажатии кнопки передать контент в стилизованный другой на это же странице

//code button
export default function ProductBody(){
   const zsu = () => [alert("Did you help ZSU with a coin?!"), alert("Or are you not love zsu???!!!!😡😡😡😡😡")] ;
return(
    <Product>
      <div className="orb">
    <div className="body"> 
      
        {Cards.map((card) =>( 
    <Card sx={{ maxWidth: 400 }}>    
      <CardActionArea>
        <CardMedia
          component="img"
          height="247"
          image={card.img} onClick={zsu}
          alt="Ups...."
        />
        <CardContent>
          <div className="date">
            <img src={tablo} width="12px"/> 
            {card.date}
          </div>
          <Typography gutterBottom variant="h5" component="div">
            {card.name}
          </Typography>
          <Typography variant="body2" color="text.secondary">
            {card.Typography1}
          </Typography>
        </CardContent>
        
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary" >
          <a href={card.knopka}>More info -＞</a>
        </Button>
      </CardActions>
    </Card>
      ))}
    
    </div>
    </div> 
    </Product>
)
};

//code header2
export default function DenseAppBar() {
  return (
  
  <div className="ORB">
      <HeaderP2Foto>
            <BodyPage2> 
              <div className="BodyPage2Text">
                      <div className="titleP2">Lorem ipsum dolor sit amet.</div>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid fugiat
               doloremque velit necessitatibus! Sed, perferendis minus culpa aut, asperiores ex quisquam sint eum 
               temporibus eaque provident quidem similique ducimus nesciunt, quibusdam aliquid incidunt ipsam. Facere
                dolore corrupti nulla? Deleniti voluptatum magni sapiente at non quisquam placeat officia minus 
                exercitationem, nisi, vitae, dolores laudantium dolorem maxime dolore dolor cum. Ad, ut nihil. 
                Nisi voluptate voluptates illo repellendus nulla sit amet odio in sint dolores unde eos similique 
                quibusdam voluptatibus ullam id aspernatur, dolorem ducimus. Temporibus, recusandae quibusdam 
                impedit earum reiciendis voluptates, porro, dolorem iure accusantium rem iusto soluta. 
                Accusantium vel neque eum repellat adipisci perferendis id animi aliquid quaerat, modi accusamus 
                temporibus nobis pariatur a similique doloremque porro sed. Praesentium recusandae quo ullam unde 
                aspernatur, repudiandae at eaque excepturi doloribus corporis odio deserunt atque? Ut facilis atque 
                officiis deleniti ipsum! Quod delectus asperiores saepe dolore. Atque nam doloribus accusantium
                 dolorem dolorum officia consectetur molestiae quos quae nobis ea natus, optio obcaecati praesentium 
                 vel exercitationem consequuntur eum tempora. Ullam aspernatur quae sint deleniti recusandae officia 
                 ipsam repellat voluptates ratione, debitis, nihil quo, eius reiciendis eaque. Quasi minus similique 
                 quia delectus. In, blanditiis voluptate perspiciatis fuga veritatis molestiae harum quis illum ut 
                 sequi laborum velit delectus magni tempore dicta dolore ullam nostrum labore magnam? Recusandae 
                 modi eos esse accusamus quas eaque aspernatur, vitae, obcaecati blanditiis neque vel ab debitis 
                 nesciunt hic, porro molestiae repellendus! At iste doloribus corporis odit maiores consequuntur, 
                 accusantium nobis reiciendis minus quasi accusamus exercitationem dignissimos porro maxime odio 
                 consequatur culpa tempora quibusdam eum adipisci veniam provident ullam? Accusamus, consequuntur 
                 sit accusantium suscipit velit exercitationem, mollitia cumque cupiditate illum at animi sed 
                 adipisci officiis, iusto est distinctio. Quam omnis explicabo aliquam aspernatur esse tenetur 
                 harum hic, cum, debitis error possimus, maxime ex officiis est voluptate minima vero at magnam atque?</div>
                  
            </BodyPage2>     
        <img src={flag} height="245px" width="100%" />
      </HeaderP2Foto>
      <StyledButton>
          <Button variant="contained" >
                Back to start
          </Button>
       </StyledButton>
  </div>
  

  );
}

//App
import Header from "./containers/header";
import { Wrapper, Wrapper2, OB } from "./containers/ui/style";
import Results from "./containers/result";
import ProductBody from "./containers/body";
import DenseAppBar from "./headerP2/headerP2";








function App() {
  return (
    <OB >
      <Wrapper>
      <Header />
      <Results />
      <ProductBody />
      </Wrapper>
      <Wrapper2>
        <DenseAppBar />
      </Wrapper2>
    </OB>
  );
}

export default App;

//body
import styled from "styled-components";


export const Product = styled.div`
      font-family: 'Montserrat';
    .orb{
      display: grid;
      padding: 45px 75px 63px;
    }
    .body{
      display: grid;
      grid-template-columns:  1fr 1fr 1fr;
      grid-auto-rows: minmax(530px, 530px);  
      width: 1290px;
      height: 1105px;
      grid-gap: 45px;
      border: 1px solid #EAEAEA;
      box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.05);
      border-radius: 5px; 
    }
    .date{
      line-height: 150%;
      opacity: 0.6;
      padding: 30px 0.1px;
    }
`;

//header2
import styled from "styled-components";


export const HeaderP2Foto = styled.div`
    position: relative;
    width: auto;
    height: 245px;
`;
export const BodyPage2 = styled.div`
    position: absolute;
    top: 130px;
    left: 75px;
    width: 1290px;
    height: 901px;
    background: #FFFF;
    border: 1px solid #EAEAEA;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    .BodyPage2Text{
        position: absolute;
        width: 1140px;
        height: 837px;
        left: 75px;
        top: 114px;
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
        line-height: 170%;
        color: #000000;
    }
    .titleP2{
        position: absolute;
        width: 473px;
        height: 29px;
        left: 330px;
        top: -80px;
        font-size: 24px;
    }
`;
export const StyledButton = styled.div`
       position: absolute;
        width: 160px;
        height: 24px;
        left: 118px;
        top: 1050px;
`;