[Solved]-React Plaid Component Refreshes the page-Reactjs

I think I found the issue and though it'd be OK to post my answer on stackoverflow to help others if anyone ever faces the same problem. I was putting the react-plaid-link inside the tags. The react-plaid-link returns a button which according to the html standard a button inside a form without "type" attribute acts like a submit button. Same goes here in my case which I click the the button it submit the form which causes refreshing page. I fixed the issue by just removing the tags. My updated code looks like this.

import React, {Component} from 'react';
import BuggyApi from "../../services/BuggyApi";
import BlockUi from "react-block-ui";
import ReactPlaid from 'react-plaid'

class Integration extends Component{
state={
    plaid_public_key: "",
    plaid_public_token: "",
    blocking: false,
    isSuccess: false,
    errorMessage: [],
    open: false,
    plaidData: [],
};

componentWillMount(){
    new BuggyApi().getPlaidPublicKey().then((response)=>{
        console.log(response.data);
        if(response.status===200){
            this.setState({
                plaid_public_key: response.data.public_key
            });
        }
    }).catch((error)=>{

    })
}


handleOnExit = (error, metadata)=>{
    if (error != null) {
        console.log('link: user exited');
        console.log(error, metadata);
    }
};
handleOnLoad =()=>{
    console.log('link: loaded');
};
handleOnEvent =(eventname, metadata)=>{
    console.log('link: user event', eventname, metadata);

};
handleOnSuccess = (public_token, metadata) => {
    console.log('public_token: ' + public_token);
    console.log('account ID: ' + metadata.account_id);
};
componentDidMount(){
    const script = document.createElement("script");
    script.src = "https://cdn.plaid.com/link/v2/stable/link-initialize.js";
    script.async = true;
    document.body.appendChild(script);
}



render(){
    return(
        <div className="page-wrapper">
            <div className="content container-fluid">
                <div className="row">
                    <div className="col-xs-8">
                        <h4 className="page-title">Integration</h4>
                    </div>
                    <div className="col-xs-4 text-right m-b-30">

                    </div>
                </div>
                <div className="row">
                    <div className="col-md-12">
                        <div className="text-center">
                            <h4 className="modal-title">
                                Link your bank account
                            </h4>
                        </div>
                        <br/>
                        <br/>
                            {(this.state.isSuccess)?
                                <div className="row">
                                    <div className="col-sm-6 col-sm-offset-3">
                                        <div className="alert alert-success">
                                            <strong>Success!</strong> Settings updated successfully!
                                        </div>
                                    </div>
                                </div>:null
                            }
                            {(this.state.errorMessage.length>0)?
                                <div className="row">
                                    <div className="col-sm-6 col-sm-offset-3">
                                        <div className="alert alert-danger">
                                            <ul>
                                                {this.state.errorMessage.map((message,i) =><li key={i}>{message}</li>)}
                                            </ul>
                                        </div>
                                    </div>
                                </div>:null
                            }
                            <BlockUi tag="div" blocking={this.state.blocking}>
                                <div className="row">
                                    <div className="col-sm-6 col-sm-offset-3">
                                        {(this.state.plaid_public_key!=="")?
                                            <div>
                                                <button onClick={() => this.setState({ open: true})}>Open Plaid</button>
                                                <ReactPlaid
                                                    clientName="Arshad"
                                                    product={["auth"]}
                                                    apiKey={this.state.plaid_public_key}
                                                    env='sandbox'
                                                    open={this.state.open}
                                                    onSuccess={(token, metaData) => this.setState({plaidData: metaData})}
                                                    onExit={() => this.setState({open: false})}
                                                />
                                            </div>:null
                                        }
                                    </div>
                                </div>

                            </BlockUi>
                    </div>
                </div>
            </div>
        </div>
    );
};
}

 export default Integration;