Cursor showing outside the Text Input Area

Here is a snippet of the code :

Components :

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;


`

Render function :

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>
    )

When I hover over the 2nd text box, I don't see the cursor. The cursor is only visible from outside the text area. Also the Close button does not work. Is it some issue with the way the components are positioned? What am I doing wrong? Any help would be appreciated greatly. Thank you!