React ThemeContext doesn't work for semantic UI for react Modal

Question

I'm creating a dark theme for my site, and I used createContext from React to create it. Every element in my site is displayed as it should be in dark theme, except the semantic UI modal. The dark theme doesn't apply to it. Is there any way to fix this?

here is my code

import React, { memo, useEffect, useState } from 'react';
import styled from 'styled-components';
import { Switch, Route } from 'react-router-dom';

import indexRoutes from '../../routes/indexRoutes';
import { createContext } from 'react';

const AppWrapper = styled.div`
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  min-height: 100%;
  padding: 0px;
  flex-direction: column;
`;

export const ThemeContext = createContext(null);

export default function App() {
  const initialTheme =
    JSON.parse(localStorage.getItem('theme')) || 'lightTheme';
  const [theme, setTheme] = useState(initialTheme);

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

  useEffect(() => {
    localStorage.setItem('theme', JSON.stringify(theme));
  }, [theme]);

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      <div id={theme} style={{ height: '100%' }}>
        <AppWrapper>
          <Switch>
            {indexRoutes.map((prop, key) => (
              <Route
                exact
                path={prop.path}
                component={prop.component}
                key={key}
              />
            ))}
          </Switch>
        </AppWrapper>
      </div>
    </ThemeContext.Provider>
  );
}

modal

<Modal
        size="tiny"
        open={openModal}
        onClose={() => onCloseModal(false)}
        onOpen={() => setOpenModal(true)}
      >
        <Modal.Header>
          <h3 text="Update Work Order" />
        </Modal.Header>
        <Modal.Content className="uk-margin-bottom">
          <div>Sample</div>
        </Modal.Content>
 </Modal>

Thanks in advance.