Solve having more than one copy of React in the same app

I'm developing a React module locally. For that, I'm linking my module using npm link. The module is imported successfully but hooks are failing inside the module. It's throwing the following error:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Checking the suggestions at React docs, I can confirm my app is using duplicate versions of React since the following code returns false:

// node_modules/mymodule/src/index.js
export { default as ReactFromModule } from 'react'

// src/index.js
import React from 'react'
import { ReactFromModule } from 'mymodule'
console.log(React === ReactFromModule) //false

This issue is full of suggestions but they are confusing. How can I solve it?

Note: Im not breaking rules of hooks, the error appears only when importing the module from an application.

In the module you are developing, add the conflicting packages to peerDependencies (and remove them from dependencies or devDependencies):

  // package.json
  "peerDependencies": {
    "react": "16.13.1",
    "react-dom": "16.13.1"
  },

Execute npm install in your module.

Now add react and react-dom to the webpack configuration of your module as externals. These packages shouldnt be included in the bundle of the module (the app that uses the module will provide them):

// webpack.config.js
module.exports = {
    /*
    rest of config...
    */
    output: {
        filename: "index.js",
        pathinfo: false,
        libraryTarget: 'umd', // In my case, I use libraryTarget as 'umd'. Not sure if relevant
    },
    externals: {
        // Use external version of React
        "react": {
            "commonjs": "react",
            "commonjs2": "react",
            "amd": "react",
            "root": "React"
        },
        "react-dom": {
            "commonjs": "react-dom",
            "commonjs2": "react-dom",
            "amd": "react-dom",
            "root": "ReactDOM"
        }
    },
};

Then, after building your module, in your application you can check that both versions are now the same:

// node_modules/mymodule/src/index.js
export { default as ReactFromModule } from 'react'

// src/index.js
import React from 'react'
import { ReactFromModule } from 'mymodule'
console.log(React === ReactFromModule) // true :)