I am a junior in TypeScript, I am trying to create a dark mode in TypeScript, using styled-components and a custom hook.

useDarkMode.tsx

import { useState } from 'react';

export const useDarkMode = () => {
  const [theme, setTheme] = useState('dark');

  const toggleTheme = () => {
    theme === 'dark' ? setTheme('light') : setTheme('dark');
  };

  return [theme, toggleTheme];
};

HeaderComponent.tsx

import styled from 'styled-components';
import { useDarkMode } from '../hooks';
import { ToggleTheme } from './';

const Header = styled.header`
  position: relative;
  width: 100%;
  display: inline-block;
  float: left;
  margin: 0;
  &:after {
    clear: both;
    content: '';
    display: table;
  }
`;

export const HeaderComponent = () => {
  const [theme, toggleTheme] = useDarkMode();
  console.log(theme);
  return (
    <>
      <Header>
                   //