Webpack Federation Errors when implment iFrom one React Vite to another?

i have this Error when implment Table Data to another React App with same versioning in remote and host using module federation

Code or Remote

const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.config.base');
const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
const portfinder = require('portfinder');
const deps = require('./package.json').dependencies;

module.exports = new Promise((resolve, reject) => {
  portfinder.getPort({ port: 3000 }, (err, port) => {
    if (err) {
      reject(err);
    } else {
      resolve(
        merge(baseConfig, {
          mode: 'development',
          output: {
            publicPath: `http://localhost:${port}/`,
          },
          plugins: [
            new ModuleFederationPlugin({
              name: 'SettlementService',
              filename: 'settlementServiceEntry.js',
              exposes: {
                './SettlementsDetails': './src/components/SettlementsDetails/SettlementsDetails',
              },
              // shared: {
              //   react: {
              //     singleton: true,
              //     requiredVersion: deps.react,
              //     eager: false, // Ensure not eager
              //   },
              //   'react-dom': {
              //     singleton: true,
              //     requiredVersion: deps['react-dom'],
              //     eager: false, // Ensure not eager
              //   },
              // },
            }),
          ],
          
          devServer: {
            port: port,
            hot: true,
            compress: true,
            historyApiFallback: true,
            headers: {
              'Access-Control-Allow-Origin': '*',
            },
          },
          devtool: 'eval-source-map',
        })
      );
    }
  });
});

implmentations

const TransactionDetails2 = React.lazy(() =>
  import("SettlementService/SettlementsDetails")
);

  <Suspense fallback={<div>Loading...</div>}>
      <TransactionDetails2 />
    </Suspense>

mostly errors related to hydrations or normal React Errors

i tried to use just Component with Hello world word and its work , but when implment component whice use Data Table , Hooks , fetching its not working