React router render component twice

I have routs with children and on the first load, everything working fine but once I'm staring through the site, the components starting to render twice. I'm not sure what I'm doing wrong. This is the route top structure:

<React.Suspense fallback={<span>Loading...</span>}>
    <Switch>
       <Route path={"/dashboard/optionOne"} component={OptionOne} />
       <Route path={"/dashboard/OptionTwo"} component={OptionTwo}/>
    <Switch>
</React.Suspense>

Then these are the children route: OptionOne Component

    <Switch>
       <Route exact path={path} component={OptionOneContainer}/>
       <Route path={`${path}/subChildOne`} component={SubChildOne}/>
       <Route path={`${path}/:subChildTwo`} component={SubChildTwo}/>
    </Switch>

OptionTwo component

    <Switch>
       <Route exact path={path} component={OptionTwoContainer}/>
       <Route path={`${path}/OptionTwoSubChildOne`} component={OptionTwoSubChildOne}/>
       <Route path={`${path}/:OptionTwoSubChildTwo`} component={OptionTwoSubChildTwo}/>
    </Switch>

I have a top component header that helps navigate through the site dashboard:

const navigate=(path)=>{
  history.push(path)
}

<div>
  <Link to={"/dashboard/optionOne"}>OptionOne</Link>
  <div onClick={()=>navigate("/dashboard/optionOne")}>OptionOne</div>
  <div onClick={()=>navigate("/dashboard/optionTwo")}>OptionTwo</div>
</div>

Once clicking Link to navigate or even using the history.push, components rendering twice. Any suggestions?