React Intl: Could not find required `intl` object. needs to exist in the component ancestry

Question

I changed my project folder structure and had to remove node_modules and reinstall. Since then, I'm getting the dreaded [React Intl] Could not find required intl object. <IntlProvider> needs to exist in the component ancestry. error message.

I went over all the other questions with the same issue, but no joy so far.

Those are my dependencies:

"react": "^18.2.0",
"react-bootstrap": "^2.4.0",
"react-dom": "^18.2.0",
"react-google-autocomplete": "^2.7.0",
"react-hook-form": "^7.34.0",
"react-intl": "^6.0.5",
"react-router-dom": "^6.3.0"

And here my app.js component structure including IntlProvider

<IntlProvider
  locale={language.currentLocale}
  messages={language.currentLang}
>
  <Routes>
    <Route
      path="/"
      element={
        <MainStructure
          data={data}
          language={language}
          langSwitch={langSwitch}
        />
      }
    >
      <Route index />
      <Route
        path="personal_details"
        element={
          <PersonalDetails
            nav={nav}
            data={data}
            language={language}
            updateData={updateData}
          />
        }
      />
      <Route
        path="address_information"
        element={
          <AddressInformation
            nav={nav}
            data={data}
            language={language}
            updateData={updateData}
          />
        }
      />

      ...
    
    </Route>
  </Routes>
</IntlProvider>

My Webpack config in case is relevant:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  output: {
    path: path.join(__dirname, "/dist"), // the bundle output path
    filename: "bundle.js", // the name of the bundle
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html", // to import index.html file inside index.js
    }),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "style.css",
      chunkFilename: "chunk.css",
    }),
  ],
  devServer: {
    port: 3030, // you can change the port
    historyApiFallback: true,
    proxy: { "/mongoAllDocs": "http://localhost:4001/" },
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/, // .js and .jsx files
        exclude: /node_modules/, // excluding the node_modules folder
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.(sa|sc|c)ss$/, // styles files
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/, // to import images and fonts
        loader: "url-loader",
      },
    ],
  },
};

I have been working for months on this project and never had any issues with react-intl, and funny enough, once I close the Runtime Error modal window, the translation functionality works perfectly fine as it always did.

Any tips on how to even debug something like this?