How can I refactor this code to use createBrowserRouter from react-router-dom instead of the BrowserRouter component:

export const App: React.FC = () => {
  const { redirect } = useAuth();
  const { flags } = useFlagsContext();
  const { getUserPermissions, getUserPermissionsStatus } =
    usePermissionsContext();
  const { submitFeedback, submitFeedbackStatus, isActive, setIsActive } =
    useFeedbackContext();
  setTheme(useThemeContext().theme, flags);

  const manualActionsFlag = showManualActionsRoutes(flags);
  const activityLogFlag = showActivityLogRoutes(flags);
  const killSwitchSportFlag = showKillSwitchSportRoutes(flags);
  const killSwitchFlag = showKillSwitchRoutes(flags);
  const catalogueValidationFlag = showCatalogueValidationRoutes(flags);

  React.useEffect(() => {
    getUserPermissions();
  }, [getUserPermissions]);

  basenameRedirect();

  return (
    <ErrorBoundary>
      <div className="app">
        {getUserPermissionsStatus === 'finished' && (
          <BrowserRouter basename={routePaths.baseName}>
            <Routes>
              <Route
                path={routePaths.unauthenticated.routePath}
                element={<UnauthenticatedPage />}
              />
              <Route
                path={routePaths.unauthorised.routePath}
                element={<UnauthorisedPage />}
              />
              {manualActionsFlag && (
                <Route
                  path={routePaths.manualActions.routePath}
                  element={<PrivateRoute route={<ManualActionsRoutes />} />}
                />
              )}
              {activityLogFlag && (
                <Route
                  path={routePaths.activityLog.routePath}
                  element={<PrivateRoute route={<ActivityLogRoutes />} />}
                />
              )}
              {killSwitchFlag && (
                <Route
                  path={routePaths.killSwitch.routePath}
                  element={<PrivateRoute route={<KillSwitchRoutes />} />}
                />
              )}
              {killSwitchSportFlag && (
                <Route
                  path={routePaths.killSwitchSport.routePath}
                  element={<PrivateRoute route={<KillSwitchSportRoutes />} />}
                />
              )}
              {catalogueValidationFlag && (
                <Route
                  path={routePaths.catalogueValidation.routePath}
                  element={
                    <PrivateRoute route={<CatalogueValidationRoutes />} />
                  }
                />
              )}

              <Route
                path="*"
                element={
                  <Navigate
                    to={
                      manualActionsFlag
                        ? redirect
                        : routePaths.killSwitchSport.path
                    }
                  />
                }
              />
            </Routes>
          </BrowserRouter>
        )}
        {getUserPermissionsStatus === 'loading' && (
          <Loader testId="app-loading" size={75} />
        )}
        {getUserPermissionsStatus === 'error' && (
          <ErrorState onRetry={getUserPermissions} />
        )}
        {isActive && (
          <GiveFeedbackForm
            submitFeedback={submitFeedback}
            submitFeedbackStatus={submitFeedbackStatus}
            isActive={isActive}
            setIsActive={setIsActive}
          />
        )}
      </div>
    </ErrorBoundary>
  );
};