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