I setuping styled components and i get this error.I use preact in this project and compile it ini vite.js .

JSX element type 'GlobalStyle' does not have any construct or call signatures.

How can I make it work ?

Main.tsx : This is the file where error appears

import { render, Fragment } from "preact";

import { App } from "./app";
import { GlobalStyle, Theme } from "./styled";

render(
  <Fragment>
    <GlobalStyle />
    <Theme>
      <App />
    </Theme>
  </Fragment>,
  document.getElementById("app")!
);

GlobalGlobalStyle.ts

import { createGlobalStyle } from "styled-components/macro";

export const GlobalStyle = createGlobalStyle`
  html {
    box-sizing: border-box;
    font-size: 16px;
}
`;

My ts config

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",
    "baseUrl": ".",
    "paths": {
      "react": ["node_modules/preact/compat/"],
      "react-dom": ["node_modules/preact/compat/"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}