How to forward in styled components, props?

Question

JavaScript

Hello!
I am using styled-components. I pass props to the styled Overlay component, but nothing happens.

import React from 'react';
import styled from "styled-components";
import okay from './../../../images/okay.png'
import {Fade} from "react-reveal";
import RubberBand from 'react-reveal/RubberBand';

const Overlay = styled.div`
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    transition: .3s ease-out;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: flex;
    z-index: ${props => props.modalIsOpen ? '9999' : '-1'};
    opacity: ${props => props.modalIsOpen ? '1' : '0'};
`;

const Modal = styled.div`
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: white;
    border: none;
    cursor: auto;
    width: 100%;
    max-width: 525px;
    overflow: hidden;
    border-radius: 12px;
    transition: linear .3s;
    height: 250px;
`;

const ModalWrapper = styled(Fade)`
    width: 100%;
    display: flex;
    flex-direction: column;
`;

const ModalImage = styled.div`
    width: 30%;
    margin: 0 auto;
    opacity: 1 !important;
`;

const Image = styled.img`
  width: 100%;
`;

const TextInfo = styled.p`
  text-align: center;
  padding: 15px 0;
  font-size: 32px;
  opacity: 1 !important;
`;

const AddOrderModal = (props) => {
    return (
            <Overlay>
                <Modal
                    isOpen={props.modalIsOpen}
                    contentLabel="Example Modal"
                >
                    <ModalWrapper when={props.modalIsOpen}>
                        <RubberBand>
                            <ModalImage>
                                <Image src={okay}/>
                            </ModalImage>
                        </RubberBand>
                        <Fade bottom>
                            <TextInfo>Товар добавлен в корзину</TextInfo>
                        </Fade>
                    </ModalWrapper>
                </Modal>
            </Overlay>
    );
};

export default AddOrderModal;

Answer 1

In the example, you don't overlay anything in the Overlay.
Should be written like this

const AddOrderModal = (props) => {
    return (
      <Overlay modalIsOpen={props.modalIsOpen}>
      .....
        </Overlay>
    );
};