我正在做一个简单的React/Express网站，我试图使用样式化组件库实现CSS-in-JS。我的应用程序使用普通的.css文件渲染一切正常，但是当我尝试引入样式化组件时，页面上没有任何渲染，并且我在控制台中得到一堆错误。特别是，我得到了“Uncaught TypeError: Cannot read properties of null (reading 'useDebugValue')”错误。
我的App.js文件看起来像这样：

import React, { Component } from 'react';
import { Routes, Route } from 'react-router-dom';

import styled from 'styled-components'

import MainPage from './components/mainPage.component.js';

const AppWrapper = styled.div`
  text-align: center;
`;

class App extends Component {

  render() {

    return (
      <div>

          <AppWrapper>
          
            <NavBar />

            <Routes>
              <Route path="/" element={<MainPage />}/>
            </Routes>

          </AppWrapper>

      </div>
    );
  }
}

export default App;

我试着修改组件，但是无论样式化组件在什么文件中，即使组件本身（如\<AppWrapper\>）不包含任何内容，我都会得到错误。我还收到了一个“Warning: Invalid hook call. Hooks can only be called inside of the body of a function component.”错误，但我不确定这是如何相关的。
你知道为什么会这样吗？谢谢！