The problem is that StripeWrapper is defined after the usage, to fix this you simply move the definition up:

  import logo from './logo.svg';
  import { Routes, Route, createBrowserRouter, RouterProvider, Navigate, Outlet } from 'react-router-dom';
  import { Elements } from '@stripe/react-stripe-js';
  import { loadStripe } from '@stripe/stripe-js';
  import './App.css';
  import 'bootstrap/dist/css/bootstrap.css';
  import Header from "../src/Components/Header";
  import Home from "../src/Components/Home";
  import Search from "../src/Components/Search";
  import Login from "../src/Components/Login";
  import Sell from "../src/Components/Sell";
  import Signup from "../src/Components/Signup";
  import ErrorPage from "../src/Components/ErrorPage";
  import StripeComplete from "../src/Components/StripeComplete";
  import StripeError from "../src/Components/StripeError";
  import BuyImageCheckout from "../src/Components/BuyImageCheckout";
  import Selling from "../src/Components/Selling";
  import {} from "./APIRequests/Api";

  

  const stripePromise = loadStripe('xxxxx');

  const StripeWrapper = ({ children }) => {
    return (
      <Elements stripe={stripePromise}>
        {children}
      </Elements>
    );
  };

  const router = createBrowserRouter([
  {
    path: '/',
      element: <LayoutComponent />,
      children: [
        {
          index: true,
          element: <Home />,
        },
        {
          path: '/search',
          element: <Search />,
        },
        { path: '/sell',
          element: (
            <PrivateRoute>
              <Sell />
            </PrivateRoute>
          ),
        },
        {
          path: '/login',
          element: <Login />,
        },
        {
          path: '/signup',
          element: <Signup />,
        },
        {
          path: '/stripecomplete',
          element: <StripeComplete />,
        },
        {
          path: '/stripeerror',
          element: <StripeError />,
        },
        {
          path: '/selling',
          element: <Selling />,
        },
        {
          path: '/sell/buyimagecheckout',
          element: (
            <PrivateRoute>
              <StripeWrapper>
                <BuyImageCheckout />
              </StripeWrapper>
            </PrivateRoute>
          )
        },{
          path: '*',
          element: <ErrorPage />,
        },
      ],
    },

  ]);
  function PrivateRoute({ children }) {
    return localStorage.getItem("userGuid") != null ? children : <Navigate to="/login" />;
  }
  
  function LayoutComponent() {
    return (
      <div>
        <Header></Header>
        <main>
          <Outlet /> {/* Nested routes render here */}
        </main>
      </div>
    );
  }

  function App() {
    return <RouterProvider router={router} />;
  }

  export default App;

Edit: Why is everything indented?