Custom Registration Page Using Multiple Registration Module

I am working on a custom user registration page in Drupal 10 using the Multiple Registration module. My goal is to display the primary tabs (e.g., login, create new account, reset password) in the left column of the registration form.

I added a preprocess function to my theme’s .theme file to capture the primary tabs for the specific registration page.

/**
 * Implements hook_preprocess_HOOK() for page templates.
 */
function bootstrap_kamp_preprocess_page(array &$variables) {
  // Check if the current route is user registration for high school students.
  $route_name = \Drupal::routeMatch()->getRouteName();
  if ($route_name == 'entity.user.register_form.high_school_student' || $route_name == 'multiple_registration.role_registration_page') {
    // Fetch the primary tabs.
    if (isset($variables['tabs']['#primary'])) {
      $variables['primary_tabs'] = $variables['tabs']['#primary'];
    }
  }
}

I ensured that the template correctly checks and renders the primary_tabs variable in the left column.

<div class="container">
  <div class="row justify-content-center custom-registration-row">
    <div class="col-md-5 p-4 text-white register-form-description">
      <h2 class="text-center">{{ 'Register'|t }}</h2>
      {% if primary_tabs %}
      <nav class="tabs mt-3" role="navigation" aria-label="Tabs">
        <ul class="nav nav-tabs flex-column">
          {% for tab in primary_tabs %}
            <li class="nav-item{% if tab.active %} active{% endif %}">
              <a href="{{ tab.url }}" class="nav-link{% if tab.active %} active is-active{% endif %}" data-drupal-link-system-path="{{ tab.path }}">
                {{ tab.title }}{% if tab.active %}<span class="visually-hidden">(active tab)</span>{% endif %}
              </a>
            </li>
          {% endfor %}
        </ul>
      </nav>
      {% endif %}
    </div>
    <div class="col-md-7 p-4 bg-white shadow-sm text-dark">
      <h2 class="text-dark">{{ 'Create new account'|t }}</h2>
      <div class="region region-content">
        {{ page.content }}
      </div>
    </div>
  </div>
</div>

Despite these changes, the primary tabs are still appearing in the right column instead of the left. Additionally, it seems like the primary_tabs variable isn't being passed correctly to the template.

Could someone please guide me on how to correctly move the primary tabs to the left column of the registration form using the Multiple Registration module? Any insights or suggestions to debug this issue would be greatly appreciated.

Thank you!