光标显示在文本输入区域之外

Question

以下是代码段：

组件：

const InputText = styled.input.attrs({
    className: 'form-control',
})`


`

const InputClient = styled.div.attrs({

})`
    margin-left: 5%;


`


const InputStockItem = styled.div.attrs({

})`
    margin-left: 5%;


`


const AutoSuggestionsBox = styled.div.attrs({

})`
    margin-left: 5%;
    background-color : white;
    width : 75%;
    height : 40%;
    border-style: solid;
    border-width: 2px;


`



const RaiseMRNForm = styled.div.attrs({

})`

    height : 500px;
    background-color : papayawhip;


`

渲染功能：

return (
            <div>
            <div className="modal-wrapper"
                style={{
                    transform: show ? 'translateY(0vh)' : 'translateY(-100vh)',
                    opacity: show ? '1' : '0'
                }}>


                <div className="modal-header">
                    <h3>Raise MRN</h3>
                    <span className="close-modal-btn" onClick={close}>x</span>
                </div>



                <RaiseMRNForm>
                    <br/>

                    <InputClient>

                        <p style={{textAlign:"left"}}>Enter Client Name</p>

                        <InputText style={{width : "80%", backgroundColor : "pink", border: "1px solid black"}}
                            type="text"
                            value={ clientName }
                            onChange={this.handleChangeInputClientName}
                        />

                    </InputClient>



                    <InputStockItem>

                        <p style={{textAlign:"left"}}>Enter Stock Item</p>

                        <InputText style={{width : "80%", backgroundColor : "pink", border: "1px solid black"}}
                            type="text"
                            value={ itemName }
                            onChange={this.handleChangeInputStockItemName}
                        />

                    </InputStockItem>
                    <br/>

                    <p style={{marginLeft : "5%"}}>Pre-existing records :  </p>
                    <AutoSuggestionsBox>

                    </AutoSuggestionsBox>




                </RaiseMRNForm>



                <div className="modal-footer">
                    <button className="btn-cancel" onClick={close}>CLOSE</button>
                    <button className="btn-continue" onClick = {this.handleIncludeClient}>CONTINUE</button>
                </div>
            </div>
        </div>
    )

当我将鼠标悬停在第二个文本框上时，看不到光标。光标仅在文本区域外部可见。而且“关闭”按钮也不起作用。组件的放置方式是否有问题？我究竟做错了什么？任何帮助将不胜感激。谢谢！