Keep getting error invalid hook call trying to use package c

Expected behavior to render MdbButton in container app as it is imported from (I'm using the pro version and failed to install via npm with access token - it fails from command line every time because command line cannot sign into )

Actual behavior Given I manually downloaded the package and re-configured webpack to act as a remote via ModuleFederationPlugin (as well as created my own /public and /src folders within the root package), I create a file for each MDB React UI Kit component I want to use and create a new remote for that component. The button renders fine within the mdb5 microfrontend app. But when I remote into the button within the container app, the button will not render. Is the container app missing packages or what is missing here? I keep getting this error no matter my configuration.

Resources (screenshots, code snippets etc.)The Error:

Directory structure:

Container Microfrontend (host):

Header.js:

import React from 'react';
import { useLocation } from 'react-router-dom';

import Logo from './Navbar/Logo';
import ButtonNew from './Navbar/ButtonNew';
import NavTabs from './Navbar/NavTabs';
import NavSelect from './Navbar/NavSelect';
import NavbarContainer from './Navbar/NavbarContainer';
import useStyles from './styling/NavStyle';
import { ButtonMDB } from 'mdbReactMfe/Button';

export default function Header({ isSignedIn, onSignOut }) {
  const classes = useStyles();
  let location = useLocation();

  const onClick = () => {
    // && onSignOut function is ALWAYS TRUE
    if (isSignedIn && onSignOut) {
      onSignOut();
      console.log(isSignedIn)
      //localStorage.clear();
      localStorage.removeItem('sidebar-collapsed');
    }
  };

  const linkMap = [
    ["All Companies", "/companies"],
    ["Company Profile", "/companies/last"], // BEM TO DO: change to dropdown 
    ["Settings", "/user/settings"]
  ];

  return (  
    <React.Fragment>
      <NavbarContainer isSignedIn={isSignedIn} >

          <ul className={classes.navItem} >
            <Logo />
          </ul>
          <ul className={classes.navItem} >
            <div className={classes.navItemMd}>{isSignedIn ? <NavTabs linkMap={linkMap} /> : ''}</div>
            <div className={classes.navItemSm}>{isSignedIn ? <NavSelect linkMap={linkMap} /> : ''}</div>
          </ul>

          <ul className={`${classes.navItem} ${classes.navItemOptional}`}>
            <ButtonNew to={isSignedIn ? '/' : '/auth/signin'} onClick={onClick}>{isSignedIn ? 'Logout' : 'Login'}</ButtonNew>
            {(isSignedIn || location.pathname.includes('auth/')) ? '' : <ButtonNew to='/earlyaccess'>Early Access ➝</ButtonNew>}
            <ButtonMDB />
          </ul>

      </NavbarContainer>
    </React.Fragment>
  );
}

mdb5 Microfrontend (remote):

ButtonMDB.js:

import { MDBBtn } from 'mdb-react-ui-kit';
import React from 'react';

const ButtonMDB = props => {
  return (
    <MDBBtn
    tag='a'
    href='https://mdbootstrap.com/docs/standard/getting-started/'
    target='_blank'
    role='button'
  >
    Start MDB tutorial
  </MDBBtn>
  )
}

export default ButtonMDB

Webpack Config:

webpack.dev.js (remote):

const { merge } = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const commonConfig = require('./webpack.common');
const packageJson = require('../package.json');
const path = require('path');

const devConfig = {
  mode: 'development',
  output: {
    publicPath: 'http://localhost:8089/',   // don't forget the slash at the end
  },
  devServer: {
    port: 8089,
    historyApiFallback: true,
    open: true,
    compress: true,
    hot: true,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'mdbReactMod',
      filename: 'remoteEntry.js',
      exposes: {
        // './MDBReactApp': './src/bootstrap',
        './Button': './src/components/buttons/ButtonMDB'
      },
      shared: packageJson.dependencies,
    }),
  ],
};

module.exports = merge(commonConfig, devConfig);

webpack.common.js (remote):

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './app/src/index.tsx',

  output: {
    publicPath: '/',
  },

  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-env'],
            plugins: ['@babel/plugin-transform-runtime'],
          },
        },
      },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.((c|sa|sc)ss)$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        use: 'file-loader',
      },
      {
        test: /\.(woff|woff2)$/,
        use: 'url-loader?prefix=font/&limit=5000',
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=10000&mimetype=application/octet-stream',
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader',
      },
      {
        test: /\.png(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=10000&mimetype=image/png',
      },
      {
        test: /\.gif(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=10000&mimetype=image/gif',
      },
    ],
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
    }),
  ],

  resolve: {
    extensions: ['.tsx', '.ts', '.js', 'd.ts', '.json', '.css'],
    alias: {
      'mdb-react-ui-kit': path.resolve('./app/src/index.tsx'),
    },
  },
};