Error ENOENT: no such file or directory for inversify files in React when using Ant Design Charts

Question

This problem only exists when I'm using Ant Design Charts. I'm currently using React 18 (using create-react-app) and I tried using Ant Design Charts for my graph. When I imported the Line chart from Antd Charts, it throws me so many warnings and errors such as:

WARNING in ./node_modules/inversify/lib/utils/serialization.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/owenngimli/Documents/Programming/02-Web Development/ADARO/frontend/node_modules/inversify/src/utils/serialization.ts' file: Error: ENOENT: no such file or directory, open '/Users/owenngimli/Documents/Programming/02-Web Development/ADARO/frontend/node_modules/inversify/src/utils/serialization.ts'

and so many others similar to it, all pointing to the same directory inside of node_modules/inversify/src/. I have used AntD charts but it never happened to me before. All I'm doing for this error to occur is just to import { Line } from '@ant-design/charts' and returning the Line chart component.

Steps which I have tried:

1. Deleting my node_modules folder and reinstalling all my packages using npm install
2. npm update to update my packages

What am I missing here?