React выдает предупреждение (не ожидал, что сервер HTML будет содержать <div>в <div>) при использовании React.Suspense

Question

Я создаю приложение для реагирования с функцией SSR, и я использую React.Suspense для разделения кода на стороне клиента, и я получаю это предупреждение.

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

У меня есть App.js файл на стороне клиента как: -

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

У меня также есть файл App.js для серверной стороны, но я не использую React.Suspense там, поскольку он не поддерживается на сервере. файл выглядит следующим образом:

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

Мое приложение отлично отображается на сервере, но внутри клиента я получаю это Warning, также когда я удаляю Suspense на клиенте App.js файл, все работает просто отлично.

может кто-нибудь помочь мне решить эту проблему.