React typescript - Type 'boolean' is not assignable to type

I have a demo

It's a simple React app using Typescript.

I'm trying to use Reacts Context api

I've created a context ThemeContext with simple theme styling values to use in other components.

I'm then using this theme context to styled a list of books Booklist.tsx

I want a button to update the theme

I have a themetoggle in the context that I'm trying to call from the ThemeToggle component.

My problem is the onClick in this ThemeToggle I get the error

(JSX attribute) React.DOMAttributes<HTMLButtonElement>.onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void

Type 'boolean' is not assignable to type '(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void'.(2322)

ThemeToggle.tsx(23, 29): The expected type comes from property 'onClick' which is declared here on type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'

I'm sure this is a typescript error but not sure how to fix it.

Whats casuing this error on the onClick, how can I fix it

index.tsx

import React from 'react';
import BookList from './Booklist';
import ThemeContextProvider from './ThemeContext';
import { render } from "react-dom";
import ThemeToggle from './ThemeToggle';
import './style.css'

const App:React.FC = () => {
  return (
    <div className="App">
      <ThemeContextProvider>
        <BookList />
        <ThemeToggle/>
      </ThemeContextProvider>
    </div>
  );
}

export default App;
render(<App />, document.getElementById("root"));

ThemeContext.tsx

import React, {createContext} from 'react'

export interface Props {}

export interface State {
    lightTheme: boolean
    light:{syntax: string, ui: string, bg: string}
    dark:{syntax: string, ui: string, bg: string}
    toggleTheme:boolean
}

const defaultState:State = {
    lightTheme: true,
    light:{syntax:'', ui:'', bg:''},
    dark:{syntax:'', ui:'', bg:''},
    toggleTheme:false
}

export const ThemeContext = createContext(defaultState)

class ThemeContextProvider extends React.Component<Props, State> {

    constructor(props: Props){
        super(props)

        this.state = { 
            lightTheme: true,
            light: {syntax: '#333', ui: 'pink', bg: '#bbb'},
            dark: {syntax: '#ddd', ui: '#333', bg: '#555'},
            toggleTheme: false
        }
    }

    toggleTheme = () => {
        this.setState({ lightTheme: !this.state.lightTheme})
    }

    render() { 
        return (  
            <ThemeContext.Provider value={{...this.state, toggleTheme: this.state.toggleTheme}}>
                {this.props.children}
            </ThemeContext.Provider>
        );
    }
}

export default ThemeContextProvider;

Booklist.tsx

import React from 'react'
import { ThemeContext } from './ThemeContext';

export interface Props {}

export interface State {
    lightTheme: boolean
    light:Darkness
    dark:Darkness
}

interface Darkness{
    syntax: string
    ui: string
    bg: string 
}

class BookList extends React.Component<Props, State> {
    render() { 
      return(
        <ThemeContext.Consumer>
        {(state) => {
          const { lightTheme, light, dark} = state
          const theme = lightTheme ? light : dark
          return(
                  <div style={{color: theme.syntax, background: theme.bg}}>
                      <ul>
                          <li style={{background:theme.ui}}>Book One</li>
                          <li style={{background:theme.ui}}>Book Two</li>
                      </ul>
                  </div>
          )
        }}</ThemeContext.Consumer>
      )
    }
}

export default BookList;        

ThemeToggle

import * as React from 'react';
import { ThemeContext } from './ThemeContext';

export interface ThemeToggleProps {}

export interface ThemeToggleState {}

class ThemeToggle  extends React.Component<ThemeToggleProps, ThemeToggleState> {
    render() { 
        return ( 
            <ThemeContext.Consumer>
                {(state) => {
                    const {toggleTheme} = state
                    return(
                        <button onClick={toggleTheme}>Toggle Theme</button>
                    )
                }}
            </ThemeContext.Consumer>
         );
    }
}

export default ThemeToggle ;