Why function is empty that's passed form ThemeContext - reactjs

Question

I am trying to call toggleTheme function from themeContext. But it is empty function.
themeContext.js
import React, { useState } from 'react';
export const ThemeContext = React.createContext({
theme: 'light',
toggleTheme: () => {}
});
export function ThemeContextProvider({ children }) {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
console.log("ToggleTheme")
setTheme(theme === 'light' ? 'dark' : 'light');
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}
//App.js
import React, { useContext } from "react";
import { ThemeContext, ThemeContextProvider } from "./theme/themeContext";
import styled from "styled-components";
const AppContainer = styled.div`
color: ${({ theme }) => theme.textPrimary};
background-color: ${({ theme }) => theme.background};
font-size: large;
font-weight: bold;
padding: 20px;
height: calc(100vh - 40px);
transition: all 0.5s;
`;
const Button = styled.button`
color: ${({ theme }) => theme.textPrimary};
background-color: ${({ theme }) => theme.background};
border: 2px ${({ theme }) => theme.textPrimary} solid;
float: right;
transition: all 0.5s;
cursor: pointer;
`;
function App() {
const { theme, toggleTheme } = useContext(ThemeContext);
const handleClick = () => {
console.log(theme);
console.log(toggleTheme);
toggleTheme();
};
return (
<ThemeContextProvider>
<AppContainer theme={theme}>
<Button onClick={() => handleClick()}>
Switch to {theme === "light" ? "Dark" : "Light"}
</Button>
{/* rest of your component code */}
</AppContainer>
</ThemeContextProvider>
);
}
export default App;