React JS: Пытаюсь использовать styled components, но получаю Cannot read properties of null (reading 'useContext')

Я создал компонент при помощи styled components, затем пытаюсь использовать его в другом компоненте, но получаю ошибку.

Cannot read properties of null (reading 'useContext')
TypeError: Cannot read properties of null (reading 'useContext')
    at Object.useContext (https://localhost:44488/static/js/bundle.js:73584:25)
    at https://localhost:44488/static/js/bundle.js:75297:58
    at O (https://localhost:44488/static/js/bundle.js:75323:6)
    at renderWithHooks (https://localhost:44488/static/js/bundle.js:30328:22)
    at updateForwardRef (https://localhost:44488/static/js/bundle.js:32899:24)
    at beginWork (https://localhost:44488/static/js/bundle.js:34946:20)
    at HTMLUnknownElement.callCallback (https://localhost:44488/static/js/bundle.js:19920:18)
    at Object.invokeGuardedCallbackDev (https://localhost:44488/static/js/bundle.js:19964:20)
    at invokeGuardedCallback (https://localhost:44488/static/js/bundle.js:20021:35)
    at beginWork$1 (https://localhost:44488/static/js/bundle.js:39895:11)

import React, { Component } from 'react';
import styled from "styled-components";

const H1 = styled.h1`
  color: red;
`

export class ProductDetail extends Component {
  render() {
    
    return (
      <div>
        <H1>headers</H1>
     </div>
}