I needed to change this:

const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');

to this:

const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)', { noSsr: true });

Metarial UI useMediaQuery hooks render twice to React Component, do you have any solution for it?

According to docs, you can set this to false if you are not doing any server side rendering:

Options.noSsr (Boolean [optional]): Defaults to false. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. It's slower. You can set this flag to true if you are not doing server-side rendering.