Using in NextJs project，but got "Expected server HTML to contain a matching <span> in <nav>. "

[yourmoonlight]

Describe the bug

A clear and concise description of what the bug is.

I have no idea why this error came out.

Warning: Expected server HTML to contain a matching in

.
at span
at O (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:19811)
at nav
at O (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:19811)
at eval (webpack-internal:///./node_modules/react-data-table-component/dist/index.cjs.js:396:40)
at div
at Fe (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:17360)
at eval (webpack-internal:///./node_modules/react-data-table-component/dist/index.cjs.js:396:6011)
at div
at PeerTable (webpack-internal:///./pages/peers/index.js:35:36)
at main
at Layout (webpack-internal:///./components/layout/layout.js:19:33)
at MyApp (webpack-internal:///./pages/_app.js:42:27)
at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20746)
at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23395)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:323:9)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:825:26)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:949:27)

[abdulsamadayoade]

I'm facing the same issue too

[krmgumus]

I had a some issue and solved like this
Match the Pagination to router.isReady

 const router = useRouter();



   <DataTable
            title="Countries"
            columns={columns}
            data={filteredData}
            defaultSortFieldId={1}
            selectableRows
            pagination={router.isReady}
            paginationServer={false}
            paginationIconFirstPage
            onSelectedRowsChange={(e) => handleSelected(e.selectedRows)}
          />