Advice on dependency hoisting in monorepos

[nerdypinkbooks]

NPM version: 8.11; Node: 16.15.1

Currently, I'm working in a monorepo that is set up like:

Root/node_nodes:
	- react
	- react-dom
	apps 
		app-A
			node_modules:
				- no react
		app-B
			node_modules
				- no react
	packages
		-shared component library
			node_modules
                                - no react

All the apps and the component library are on the same version of react which is declared in the package.json at the root of the repository and all the apps and component library just list react as * under peer dependencies in their package.json's. We're now trying to upgrade the react version of one app as a time. We listed specific versions of react under app-A and app-B and have the shared component library just listing it as * as the library is simpler and would likely be able to use any version of React listed in either app. The issue we seem to be running into is the higher version of react is being 'hoisted' to the root of the repository. So now we have:

Root/node_nodes:
	- react 18
	- react-dom
	apps 
		app-A
			node_modules:
				- react 16
		app-B
			node_modules
				- no react
	packages
		-shared component library
			node_modules
                                - no react

There are a bunch of failures in the lower versioned app presumably related to the hoisted higher version being in the root (some axios imports for example). I'm opening this issue to see if there is documentation or general advice/recommendations for how to handle this scenario which I assume is fairly common in mono-repo world. We have started adding overrides in our root package.json to try to alias react, react-dom, axios, and other problematically versioned dependencies to the correct version in the correct app but wonder if there are any general recommendations or solutions for this scenario.