What am I doing wrong with the colorscheme switch? | Mantine | Page 1

Following code, which obviously doesn't work:

import './App.css'
import { MantineProvider, Button, ColorSchemeProvider, ColorScheme, ActionIcon, useMantineColorScheme } from '@mantine/core'
import { useState } from 'react';
import { IconSun, IconMoonStars } from '@tabler/icons';

function App() {
  const [colorScheme, setColorScheme] = useState<ColorScheme>('light');
  const toggleColorScheme = (value?: ColorScheme) =>
    setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'));

  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
  const dark = colorScheme === 'dark';

  return (
    <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
      <MantineProvider theme={{ colorScheme: 'light' }} withGlobalStyles withNormalizeCSS>
        <ActionIcon
          onClick={() => toggleColorScheme()}
          title='Toggle color scheme'
        >
          {dark ? <IconSun size={18} /> : <IconMoonStars size={18} />}
        </ActionIcon>
      </MantineProvider>
    </ColorSchemeProvider>
  )
}

export default App

What would i have to do to make it work? I didn't fully understand it from the docs.

#What am I doing wrong with the colorscheme switch?