Hello, so i'm using NextJS App Router and want to use a twin.macro packages. but, when i do customizing a babel config, the nextjs will returns a weird error. like this:

Syntax error: Unexpected token, expected ","

  18 | import { useEffect, useState } from "react";
  19 |
> 20 | export default function Home(request: {
     |                                     ^
  21 |   params: { locale: "id" | "en" };
  22 |   searchParams: {
  23 |     changeLang?: "true" | "false";


 ⨯ ReferenceError: React is not defined
    at RootLayout (./src/app/[locale]/layout.tsx:15:5)
    at stringify (<anonymous>)
  16 |   };
  17 | }) {
> 18 |   return (
     |  ^
  19 |     <Providers>
  20 |       <Navbar locale={params.locale} />
  21 |       <div>{children}</div>

But, when i remove the .babelrc or babel.config.js, the code runs perfectly. this is the babel config code:

{
  "presets": ["next/babel"],
  "plugins": [
    "macros",
    "babel-plugin-styled-components",
    "@babel/plugin-transform-react-jsx"
  ]
}

Thanks.