ReferenceError: createBrowserRouter is not defined when using “as Router” in React [closed]

When I write createBrowserRouter as Router, I am getting this error:

ReferenceError: createBrowserRouter is not defined.

But when I don’t use as Router, my code works properly. Why is this happening? Which one is correct? I am confused

import React from "react";
import ReactDOM from "react-dom/client";
import Header from "./components/Header";
import Body from "./components/Body";
import About from "./components/About";
import { createBrowserRouter, RouterProvider } from "react-router";

const AppLayout = () => {
  return (
    <div className="App">
      <Header />
      <Body />
    </div>
  );
};

const appRouter = createBrowserRouter([
  { path: "/", element: <AppLayout /> },
  { path: "About", element: <About /> },
]);

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