Wrong theme if try to set "system" theme twice

[thien-do]

What

• Source: https://codesandbox.io/s/wispy-violet-bzflv?file=/pages/index.js
• Preview: https://csb-bzflv-dvkndn.vercel.app/

1. Setup ThemeProvider and useTheme with all default props
2. Have a button that calls setTheme("system")
3. Click on the button once -> it works correctly, HTML's data-theme is the correct theme (either "light" or "dark")
4. Click again on that button -> it works incorrectly, HTML's data-theme is "system"

Why

Current source: https://github.com/pacocoursey/next-themes/blob/7c8a3269ca46f2accad778f04820075134bc6c50/index.tsx

In the 1st click of the button:

1. When "setTheme" is called, "changeTheme" is always called
2. In "changeTheme", the data-theme attribute is set to the chosen theme, which is "system"
3. The "handleMediaQuery" effect is triggered due to "theme" changed, which set data-theme to the correct value (either "light" or "dark")

In the 2nd click of the button: step 1 and 2 are the same with the 1st click, but since the theme value (in state) is not changed (still "system"), the "handleMediaQuery" is not triggered, and thus the data-theme is not changed and is still "system" as in the 2nd step.

I reviewed the 0.13 PR and it seems this still happens