ReferenceError: SharedArrayBuffer is not defined using React and MongoDB - node.js

Question

const {MongoClient} = require("mongodb")
function App() {
return (
<div>
Example Text
</div>
);
}
export default App;
Im using Mongodb to extract data from my DB and display it in react. However, inmmediately after I import {MongoClient} I recieve "ReferenceError: SharedArrayBuffer is not defined" error. I've seen some stuff about something called cross origin, but i lack the understanding in how to do that. Any help? Thanks.
My package.json is the following:
{
"name": "cart_iew",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"mongodb": "^4.1.0",
"mongoose": "^5.13.5",
"node": "^16.6.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}