Estoy configurando componentes con estilo y recibo este error. Uso preact en este proyecto y lo compilo ini vite.js.

El tipo de elemento JSX 'GlobalStyle' no tiene ninguna construcción ni firma de llamada.

¿Cómo puedo hacer que funcione?

Main.tsx: este es el archivo donde aparece el error

 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; } `;

Mi configuración ts

 { "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" }] }