Getting the following issue Cannot assign to read only property 'isEqual' of object '#<Object>'

[wmillerjjk]

Describe the bug
When adding the following line:
import DatePicker from "react-datepicker";

I am getting the following error:
Cannot assign to read only property 'isEqual' of object '#'

To Reproduce
Steps to reproduce the behavior:
My component:

import React from 'react';
import DatePicker from "react-datepicker";

export class App extends React.Component {
render() {
return (

Test

);
}
}

export default App;

I am using Node 20, webpack 5, and babel.

Expected behavior
Expected behavior is it to work as expected.

Screenshots

Additional context
Additional information seems to be choosing the commonjs instead of the esm version of date-fns. When I manually move over the code from the cjs file to the js file it works. But out the box it is choosing the wrong one.

My package.json has "type": "module".

Thanks for the help.

[UsaidAqeel]

@wmillerjjk Can you plz share version of react & react-datepicker. Make sure the versions of react-datepicker and date-fns are compatible. Check the peerDependencies section in the react-datepicker documentation

[wmillerjjk]

HI @UsaidAqeel, I am using the following:
"react-datepicker": "^7.6.0"
"date-fns": "^4.1.0",