Dark-Mode toggling Issue

Following is my DarkMode.jsx Component When I switch button ,dark mode apply only to navbar.
Other remaining Part of website not changed to Dark theme.How should I keep State updated everywhere.
using Material UI I am trying darkMode.

import React,{useState} from 'react';
import { ThemeProvider, createTheme } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import {  Switch,  } from "@mui/material"
export default function DarkMode() {

  // state to manage the dark mode
  const [toggleDarkMode, setToggleDarkMode] = useState(true);

  // function to toggle the dark mode as true or false
  const toggleDarkTheme = () => {
    setToggleDarkMode(!toggleDarkMode);
  };

  // applying the primary and secondary theme colors
  const darkTheme = createTheme({
    palette: {
      mode: toggleDarkMode ? 'dark' : 'light', // handle the dark mode state on toggle
      primary: {
        main: '#90caf9',
      },
      secondary: {
        main: '#131052',

      },
    },
  });

  return (
   <ThemeProvider theme={darkTheme}>
    <CssBaseline/>
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <h2>Toggle Dark mode</h2>
        <Switch checked={toggleDarkMode} onChange={toggleDarkTheme} />
    </div>
   </ThemeProvider>
  )
}

I add my DarkMode Component inside Main.jsx after Navbar component

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
// import App from './App'
import Navbar from './Components/components/Navbar';
import Hero from './Components/components/Hero';
import About from './Components/components/About';
import Feature from './Components/components/Feature';
import Card from './Components/components/Card';
import Opensource from './Components/components/Opensource';
import Footer from './Components/components/Footer';
import Workshop from './Components/components/Workshop';
import DarkMode from './Components/components/DarkMode';



ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Navbar/>
    <DarkMode/>
   <Hero />
   <Card />
   <About />
   <Feature />
   <Workshop/>
   <Opensource />
   <Footer />
  
  </React.StrictMode>,
)