import { Modal } from "react-bootstrap";
import { ButtonStyled } from "../..";

const ModalCom = (props) => {
 const [show, setShow] = useState(false);

const handleClose = () => setShow(false);
const handleShow = () => setShow(true);

return (
  <>
  <ButtonStyled onClick={handleShow}>{props.buttonName}</ButtonStyled>
    <Modal show={show} onHide={handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>{props.title}</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <img src={props.image} alt='wallet' />
        <p>{props.p}</p>
      </Modal.Body>
    </Modal>
  </>
);
}

export default ModalCom;

 import { ButtonStyled, ModalCom } from '../../Components';

const Donate = () =>{
    return (
        <div>
            <ModalCom 
                buttonName='Ethereum'
                title='Ethereum Wallet'
                image={ImageAddress}
                p='23189189234923jn25890bdfs89fjnk245890'
             />
        </div>
    )
}

export default Donate;

import styled from 'styled-components'

const ButtonStyled = styled.button`
    background-color = ${({ bg }) => bg};
    color : ${({color}) => color};
    border-radius: 50px;
    padding: 10px 50px;
    border: none;
    box-shadow: 4px 5px 10px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    font-size: 20px;
    margin-top: 30px;
    &:hover{
        color: white;
        background-color: #62D3FC;
    }

`;
export default ButtonStyled;

why are my props not working? for the Modal file position it is in the modal component and Donate is in Pages Donate I want to send the name of the button, title, image, paragraph sent via props but in the browser it doesn't appear what I want or even the data is not sent or Show in Browser This I want showing but i want multiple modal.

and i get a new Problem when i duplicate Modalcom then in browser dont duplicated