进入模态时，Textarea在输入时会失去焦点？

Question

我有一个使用样式组件创建的textarea和模式。当我在textarea中输入一个字母时，会失去焦点。我不确定css是问题还是渲染的方式。当它不在模态中时，它可以正常工作。

在我的渲染器中

    <ModalMessage show={this.state.showRejectModal}
                          onClose={() => this.setState({showRejectModal: false})}
                          content={[<p key={'rejectionMessage'}>Are you sure you want to reject?</p>,
                              <TextArea key={1}
                                     type={'text'}
                                        onChange={(e) => this.setState({reasonForRejection: e.target.value})}
                                        name={'reasonForRejection'}
                                        placeholder={'Reason for rejection'}
                                        value={this.state.reasonForRejection || ''}/>]}/>

以文本区域作为props.content的模式组件

const ModalMessage = (props) => {

    const ModalWrapper = styled.div`
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    `;

    const ModalContent = styled.div`
    background-color: ${modalBackgroundColor};
    margin: 15% auto; 
    padding: 20px;
    //border: 1px solid #888;
    width: 30%;
    `;

    const ModalCloseButton = styled.span`
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;

    :hover, focus{
    color: black;
    text-decoration: none;
    cursor: pointer;
    }
    `;

    const HideScroll = createGlobalStyle`
    body{
        overflow: hidden;    
    }
    `;

    return (
        <React.Fragment>
            {props.show ? <ModalWrapper>
                <ModalContent>
                    <HideScroll/>
                    {props.noClose ? null : <ModalCloseButton onClick={props.onClose}>&times;</ModalCloseButton>}
                    {props.cancel ? <FontAwesomeIcon icon={faMinusCircle} size='6x' style={{color: '#96aff5'}}/> :
                        <FontAwesomeIcon icon={faCheckCircle} size='6x' style={{color: '#96aff5'}}/>}<br/>
                    {props.content}
                </ModalContent>
            </ModalWrapper> : null}
        </React.Fragment>
    );
};

文本区域

export const TextArea = styled.textarea`
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    outline: none;
    display: block;
    width: 100%;
    padding: 7px;
    border: none;
    border-bottom: 1px solid #ddd;
    background: transparent;
    margin-bottom: 10px;
    font: 16px Arial, Helvetica, sans-serif;
    height: 45px;
    overflow: hidden;
    margin-left: 2px;
    color: #808080;

    ::placeholder {
       color: #808080;
       opacity: 1;
    }
    `;