How to get multiple major versions of dependency in npm workspaces?

Question

I have a monorepo based on npm workspaces. I use npm@10 at this point. It includes multiple libraries and two websites. For a long time we were stuck with React 17 because we supported very old browsers, and now we can upgrade to React 18, but want to make it incrementally, so it wouldn't be one very large task that will take a lot of time to do, review and test. However, we encounter a problem where updating libraries leads to problems with applications.

It's important to note, that we expect libraries to work with both - React 17 and React 18 for a time, and it's practically working - I can install a library in separate project with React 18 or React 17 and both work as intended. However, it doesn't work inside a monorepo.

Here is a setup:

root:
- libraries:
--- design-system
--- icons
--- themes
--- extras
--- ...
- websites
--- docusaurus
--- examples
--- playground

If we update react only in libraries, we can't properly build websites, because website will look into root node_modules directory and take types and react itself from there, but libraries have their own node_modules and look there. There are immediate conflicts and while some can be mitigated and worked around (like with types), others can't. Websites will require a lot more work to upgrade, so my hope was to leave them as is for a time, and do it one by one in the future.

I tried overrides in package.json, and while it allows us to have multiple versions of the package, they are not isolated, since workspace packages are linked with their own node_modules.

I tried --install-strategy=nested, but it doesn't work in workspaces and as far as I understand, it will not solve the problem, but can add new ones.

I also tried yalc, but this approach requires manual linking (I can wrap it into a script without problems) and completely eliminate some of the necessary nested node_modules that get installed inside library instead of root.

Is this possible to somehow have multiple major versions of a package (in our case it's react, react-dom and their types) in npm workspaces and not have conflicts between them?