ERR_REQUIRE_ESM Error When Refreshing the Page

[Ashkan-Dodgeball]

Hi, I am using nivo/core and bar, line, and pie components with a NextJS react environment. I am getting this error on refresh that makes it seem like it's related to the Nivo's dependency package:
Error: require() of ES Module /node_modules/d3-interpolate/src/index.js from node_modules/@nivo/core/dist/nivo-core.cjs.js not supported. Instead change the require of index.js in /node_modules/@nivo/core/dist/nivo-core.cjs.js to a dynamic import() which is available in all CommonJS modules.

I saw this issue with version 0.84, I just updated the packages to 0.85.1 but still see the same error. Is there any fix or workaround for this issue?

Node ver: 16.15.0
Next ver: 12.1.6

next.config.js:

module.exports = {
webpack(config) {
config.module.rules.push({
test: /.svg$/,
use: ["@svgr/webpack"],
});
return config;
},
transpilePackages: ["@nivo"],
experimental: {
esmExternals: "loose",
},
};

Thank you.