React securedRoute (Route) теряет фокус на вводе

Question

Вот главный компонент моего приложения-реакции

<Router history={history}>
                    <Header />
                    <Switch>
                        <Route exact path='/' render={() => <Landing
                            isVerified={this.state.isVerified}
                            zipCode={this.state.zipCode}
                            date={this.state.date} touched={this.state.touched}
                            handInputChange={this.handInputChange}
                            handleBlur={this.handleBlur}
                            toggleWorkspace={this.toggleWorkspace}
                            onChange={this.onChange}
                            people={this.state.people}
                            increase={this.increase}
                            decrease={this.decrease}
                            location={this.state.location} />} />
                        <SecuredRoute exact path='/workspaces' component={() => <Workspace
                            zipCode={this.state.zipCode}
                            workspaceinfo={this.state.workspaceinfo}
                            date={this.state.date}
                            people={this.state.people}
                            location={this.state.location} />} />
                        <SecuredRoute path="/workspaces/:workspaceId" component={WorkspaceWithId} />
                        <SecuredRoute exact path="/personalinfo" component={() => <PersonalInfo
                            handInputChange={this.handInputChange}
                            handleBlur={this.handleBlur}
                            onChange={this.onChange}
                            personZipCode={this.state.personZipCode}
                            businessName={this.state.businessName}
                            personEmail={this.state.personEmail}
                            updatePersonDetails = {this.updatePersonDetails}
                            deletePersonDetails = {this.deletePersonDetails} />} />
                        <Redirect to='/' />
                    </Switch>
                </Router>

Вот компонент SecuredRoute

import React from 'react'
import { Route, Redirect, withRouter } from 'react-router';

export const authentication = {
    isLoggedIn: false,
    onAuthentication() {
        this.isLoggedIn = true
    },
    getLoginStatus() {
        return this.isLoggedIn;
    }
}
const SecuredRoute = ({ component: Component, ...rest }) => {
    return (
        <Route {...rest} render={
            data => authentication.getLoginStatus() ? (
                <Component {...data} />) :
                <Redirect to={{ pathname: '/' }}></Redirect>}></Route>
    )
}

export default withRouter(SecuredRoute) 

Вот компонент PersonalInfo, в котором ввод теряет фокус

const PersonalInfo = (props) => {
    return (
        <>
            <div className="container-fluid">
                <div className="row mt-2">
                    <div className="col-sm-12">
                        <div className="text-center"></div>
                        <Progress animated={true} striped color="primary" value="38">38%</Progress>
                    </div>
                </div>
            </div>
            <div className="jumbotron py-3 mt-2">
                <div className="container personalDetails py-3">
                    <div className="row">
                        <div className="mx-auto col-sm-5">
                            <Card>
                                <CardHeader>
                                    <CardTitle className="lead">Let us get to know you...</CardTitle>
                                </CardHeader>
                                <CardBody>
                                    <Form onSubmit={handleSubmit}>
                                        <FormGroup row>


                                            <Label htmlFor="businessName" className="col-sm-4 col-form-label form-control-label required">Business Name</Label>
                                            <div className="col-sm-8">
                                                <Input key = "business" type="text" name="businessName" id="businessName"
                                                    onBlur={props.handleBlur('businessName')}
                                                    onChange={props.handInputChange}
                                                    value={props.businessName} />
                                            </div>
                                            {/* <FormFeedback>{errors.zipCode}</FormFeedback> */}

                                        </FormGroup>
                                        <FormGroup row>


                                            <Label htmlFor="personEmail" className="col-sm-4 col-form-label form-control-label required">Email</Label>
                                            <div className="col-sm-8">
                                                <Input key="personEmail" type="email" name="personEmail" id="personEmail"
                                                    onChange={props.handInputChange}
                                                    onBlur={props.handleBlur('personEmail')}
                                                    value={props.personEmail} />
                                            </div>
                                            {/* <FormFeedback>{errors.zipCode}</FormFeedback> */}

                                        </FormGroup>
                                        <FormGroup row>


                                            <Label htmlFor="personZipCode" className="col-sm-4 col-form-label form-control-label required">Zip Code</Label>
                                            <div className="col-sm-8">
                                                <Input id="personZipCode" type="text" name="personZipCode"
                                                    onBlur={props.handleBlur('personZipCode')}
                                                    onChange={props.handInputChange}
                                                    value={props.personZipCode} />
                                            </div>

                                            {/* <FormFeedback>{errors.zipCode}</FormFeedback> */}

                                        </FormGroup>
                                        {/* <FormGroup row>
                                                
                                            </FormGroup> */}
                                    </Form>
                                    <div className="row">
                                        <div className="col-sm-4 mt-2" id="edit" style={{ display: 'none' }}>
                                            <button className="btn btn-dark">Edit Scanned Details</button>
                                        </div>
                                        <div className="offset-sm-2 col-sm-4 mt-2" id="clear" style={{ display: 'none' }}>
                                            <button className="btn btn-secondary">Delete Scanned Card</button>
                                        </div>
                                    </div>
                                    <h3 id="or" style={{ textAlign: 'center' }} className="mt-4">OR</h3>
                                    <div id="scan" style={{ cursor: 'pointer' }} onClick={()=>PopulateDetails(props.updatePersonDetails,props.deletePersonDetails)} className="card bg-warning mt-4">
                                        <div className="card-body text-center">
                                            <div className="card-text">Scan a business card</div>
                                        </div>
                                    </div>
                                    <div className="d-flex justify-content-center mt-3">
                                        <button className="btn btn-block btn-primary">Next <i className="fa fa-arrow-right" aria-hidden="true"></i></button>
                                    </div>
                                </CardBody>
                            </Card>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}

export default PersonalInfo

Может ли кто-нибудь помочь мне с этим, почему ввод теряет фокус при нажатии клавиш. В качестве альтернативы при использовании рендеринга с вводом маршрута фокус не теряется, а с защищенным маршрутом, это ..

<Route exact path="/personalinfo" render={() => <PersonalInfo
                            handInputChange={this.handInputChange}
                            handleBlur={this.handleBlur}
                            onChange={this.onChange}
                            personZipCode={this.state.personZipCode}
                            businessName={this.state.businessName}
                            personEmail={this.state.personEmail}
                            updatePersonDetails = {this.updatePersonDetails}
                            deletePersonDetails = {this.deletePersonDetails} />} />

Но Я хочу, чтобы эта ссылка была защищена.