[styled-components] children render 오류

GlobalStyle.jsx를 css전체로 적용하고 싶은데

이런 오류가 발생했다.
GlobalStyle.jsx가 children에 render가 되지 않는다!

index.js에서 app.js를 제외하고는 다른 컴포넌트들을 <Oulet/>을 이용해서 children으로 주었기 때문이다.

index.js

const router = createBrowserRouter([
  {
    paht: "/",
    element: <App />,
    errorElement: <NotFound />,
    children: [
      { index: true, path: "/", element: <Home /> },
      { path: "products", element: <AllProducts /> },
      {
        path: "/products/new",
        element: <NewProduct />,
      },
      {
        path: "/products/:id",
        element: <ProductDetail />,
      },
      {
        path: "carts",
        element: <MyCart />,
      },
    ],
  },
]);
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Fragment>
    <GlobalStyle>
    <RouterProvider router={router} />
    <GlobalStyle />
  </Fragment>
);

reportWebVitals();

App.jsx

function App() {
  return (
    <>
      <Navbar />
      <Outlet />
    </>
  );
}

export default App;

오류가 난 이유를 찾아보니 <GlobalStyle/>을 감싸주려고 했기 때문이다.
common.scss 같은 파일이기 때문에 자꾸 전체에 적용 하려면 감싸야된다고 생각을 했다.
근데 생각해보면 common.scss도 import하는 방식으로 했지 감싸주지는 않았다...ㅎㅎ

---

방법 1

index.js에서 <Fragment />하위에 단독 태그하기
index.js

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Fragment>
    <GlobalStyle />
    <RouterProvider router={router} />
  </Fragment>
);

reportWebVitals();

방법2

app.jsx에서 단독으로 태그 하기
app.jsx

function App() {
  return (
    <>
      <Navbar />
      <GlobalStyle />
      <Outlet />
    </>
  );
}

export default App;

---

app.js는 index.js에서 무조건 렌더링이 되기 때문에 app.jsx파일에서 부터 사용하거나 혹은 index.js에서 사용하면 된다고 생각 하였고 그 결과 오류는 사라졌다.

제가 생각한 방법이나 코드가 틀렸다면 첨언 부탁드립니다 :)