How to configure Eslint + Prettier for backend/frontend project

I have a project with the following (very schematic) file structure:

.
├── backend
│  ├── config
│  ├── controllers
│  ├── middleware
│  ├── models
│  ├── routes
│  └── server.js
├── frontend
│  ├── node_modules
│  ├── package.json <== Eslint + Prettier here
│  ├── postcss.config.js
│  ├── public
│  ├── src
│  ├── tailwind.config.js
│  └── yarn.lock
├── node_modules
├── package.json <== Eslint + Prettier here
└── yarn.lock

The backend is an express server, the frontend a React app.

I want to have my eslint and prettier configs in both package.json files (different rules apply, indicated in the tree above) but if I cannot compile because they conflict.

I added these to both package.json files:

"eslintConfig": {
  "extends": "@gbrachetta/eslint-config",
  "rules": {
    "sort-imports": "off",
    "import/order": "off"
  }
},
"prettier": "@gbrachetta/prettier-config"

but as mentioned above the two cannot coexist and compilation fails, so I have to delete the config above alternatively from one or the other package.json, depending on which part of my code I'm working on, and thus either frontend or backend don't have eslint/prettier linting.

I'm on VSCode and rely heavily on the error/warning system VSC provides.

Is there a way to keep them both, and eventually have different rules depending on if it's frontend or backend?