I was trying to integrate the strip API key but I am not able to come up with the solution in the new react-router-dom version

here is the full error

The above error occurred in the component:

```
at Routes (http://localhost:3000/static/js/bundle.js:81119:5)
at Router (http://localhost:3000/static/js/bundle.js:81052:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:79861:5)
at App (http://localhost:3000/main.79cc3231add2da1b35a8.hot-update.js:89:63)
at Provider (http://localhost:3000/static/js/bundle.js:74963:5)

```

Consider adding an error boundary to your tree to customize error handling behavior.
Visit <https://reactjs.org/link/error-boundaries> to learn more about error boundaries.

here is my Appjs Protected route code:

```
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";

useEffect(() => {
store.dispatch(loadUser());
getStripeApiKey();
}, []);

useEffect(() => {
 const stripePromise= loadStripe(stripeApiKey);
}, [stripeApiKey]);

<Route element={<ProtectedRoute />}>
      <Route path="/account" element={<Profile />} />
      <Route path="/me/update" element={<ProfileEdit />} />
      <Route path="/password/update" element={<UpdatePassword />} />
      <Route path="/login/shipping" element={<Shipping />} />
      <Route path="/order/confirm" element={<ConfirmOrder />} />
      {stripeApiKey && (
        <Elements stripe={stripePromise}>
          <Route path="/order/payment" element={<Payment />} />
        </Elements>
      )}
</Route>

```

My protected route code

```
const ProtectedRoute = () => {
const { loading, isAuthenticated, user } = useSelector((state) => state.user);
const location = useLocation();

if (isAuthenticated == false) {
return <Navigate to="/account" state={{ from: location }} />;
}
return <Outlet />;
};

export default ProtectedRoute;

```