React gives warning (Did not expect server HTML to contain a <div> in <div>) when using React.Suspense

Question

I am building a react app with the SSR feature and I am using React.Suspense for code-splitting on the client-side and I am getting this warning.

 Warning: Did not expect server HTML to contain a <div> in <div>

I have my App.js file on the client-side as:-

import React,{Suspense,lazy} from "react"  
import { Route, Switch } from 'react-router-dom'

const Home = lazy(() =>
  import('./components/Home')
)  
const Post = lazy(() =>
  import('./components/Post')
)  

function App(){
   return(
       <div>
         <Suspense fallback={<div>wait...</div>}>
           <Switch>
             <Route path="/" component={Home}/>
             <Route path="post" component={Post}/>
           </Switch>
         </Suspense>       
       </div>
    )
}

I also have an App.js file for the server-side, but I am not using React.Suspense there as it is not supported on the server. the file looks like below:

import React from "react"  
import { Route, Switch } from 'react-router-dom'  
import routes from './routes'

function App(){
   return(
       <div>
           <Switch>
             {routes.map(({ path, exact, component: Component, ...rest }) => (
                <Route key={path} path={path} exact={exact} render={(props) => (
                <Component {...props} {...rest} />
                )} />
            ))}
           </Switch>
              
       </div>
    )
}

My application renders perfectly on the server, but on the client-side, I am getting that Warning, also when I remove the Suspense on the client App.js file everything works just fine.

Could anyone help me with how to resolve this problem?