Custom values with setDpr are overridden with dpr prop on rerender

[nhtoby311]

I'm trying to create a component, that can setDpr, based on current graphics settings. I copied the implementation from AdaptiveDpr in drei. I noticed that when using this in an app, which of course, have multiple states update (unrelated to this component), the switching Dpr became not consistent, as sometimes it does not apply any thing but it should be. This happened clearly on route changes.

I have created a codesandbox for this: https://codesandbox.io/p/devbox/setdpr-issue-with-state-changes-4643zz?file=%2Fpages%2F_app.tsx%3A12%2C1 - it's Next.js

GraphicSettings on leva will controls how low dpr it is, which is in the Downscale.tsx. To see clearly the issue, changes the route at top left corner to go between Home and About. Swap couple of few times and there will be the inconsistent bug as the downscaled dpr is not applied. This doesn't seem to happened if I comment out the frequent state update at _app.tsx

I attached the video below to be clearer.

dpr.mp4