Interesting color mismatch with legacyMode

[k9]

First off, thanks for working on this library, it's really impressive and well documented.

I wanted to highlight a gotcha I ran into with respect to legacy color mode. As demonstrated in a minimal example here, the two boxes will be different colors even though they seem to be set to the same value. https://codesandbox.io/s/red-grass-60xi6p

My understanding is that the reason that this happens has to do with the Canvas tag setting legacyMode to false. However new Color(...) is being interpreted before legacyMode is switched off, whereas the string value is being converted to a Color object after after the switch.

(Note that if you edit the CodeSandbox, it will hot reload the scene, and now the colors will match since legacyMode has been shut off. A full reload will show the problem again)

My actual code was doing something similar to this minimal example, but it had a race condition between the Canvas being mounted, and various Color objects being instantiated as part of async loading.

So not a bug, but just wanted to submit this in case there's a way of making it simpler. Maybe it would be clearer if legacy mode was just up to the user to change on the THREE instance rather than being set through the Canvas component?

[k9]

Another example: since the legacy flag is actually global rather than per-canvas, these boxes show up as the same color, whereas before I looked into this, I would have expected a prop on Canvas to apply only to that canvas, which would mean the colors shouldn't match. https://codesandbox.io/s/confident-snowflake-x65rjb?file=/src/App.js