Module not found: Error: Can't resolve 'provider_app/App' remote React modules

Question

I'm trying to access React components from a consumer in a remote link. I'm using Module federation in Webpack 5 for this. Here's my code.

Provider App

App.js

import React from 'react'

function App() {
  return <h1>Hello from Provider App!</h1>;
}

export default App;;

index.js

import React from 'react'
import ReactDOM from 'react-dom';
import App from './App';

const render = () => {
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );
};

render();

if (module.hot) {
  module.hot.accept('./App', () => {
    render();
  });
};

webpack.config.js

const { ModuleFederationPlugin } = require('webpack').container

module.exports = {
  entry: './index.js',
  mode: 'development',
  devServer: {
    port: 3001,
  },
  output: {
    publicPath: 'http://localhost:3001/',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'provider_app',
      library: { type: 'var', name: 'provider_app' },
      filename: 'remoteEntry.js',
      exposes: {
        './App': './src/App',
      },
    shared: {
        ...deps,
        react: {
            eager: true,
        },
      }
    }),
  ],
};

Consumer App

index.js

import React from 'react'
import ReactDOM from 'react-dom';

const render = () => {
  const App = React.lazy(() => import('provider_app/App'));

  ReactDOM.render(
    <React.StrictMode>
      <React.Suspense fallback="Loading...">
        <App />
      </React.Suspense>
    </React.StrictMode>,
    document.getElementById('root')
  );
};

render();

if (module.hot) {
  module.hot.accept();
};

webpack.config.js

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  entry: './index.js',
  mode: 'development',
  devServer: {
    port: 3000,
  },
  output: {
    publicPath: 'http://localhost:3000/',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'consumer_app',
      remotes: {
        provider_app: 'provider_app@http://localhost:3001/remoteEntry.js',
      },
      shared: {
        ...deps,
        react: {
            eager: true,
        },
      }
    }),
  ],
}; 

My provider_app is fine in port 3001

But my consumer app is giving me the following error.

Module not found: Error: Can't resolve 'provider_app/App' in 'C:\Projects\test-react-app\consumer-app\src'