I managed to create a solution and have added the code below in case anyone else wants to do this.

// Custom rewrite rules for comparison
function custom_rewrite_rules() {
    add_rewrite_rule(
        '^compare/([^/]+(?:-vs-[^/]+)*)$',
        'index.php?pagename=compare&compare=$matches[1]',
        'top'
    );
}
add_action('init', 'custom_rewrite_rules');

// Add compare to query vars
function custom_query_vars($vars) {
    $vars[] = 'compare';
    return $vars;
}
add_filter('query_vars', 'custom_query_vars');

// Parse the compare query var into an array
function parse_compare_query_var($query) {
    if (!is_admin() && $query->is_main_query() && $query->is_page('compare')) {
        $compare = $query->get('compare');
        if ($compare && !is_array($compare)) {
            $query->set('compare', explode('-vs-', $compare));
        }
    }
}
add_action('pre_get_posts', 'parse_compare_query_var');


// Remove the default canonical URL
remove_action('wp_head', 'rel_canonical');

// Add custom canonical URL
function add_canonical_url() {
    if (is_page('compare')) {
        $compare = get_query_var('compare');

        if ($compare) {
            // Ensure $compare is an array
            if (!is_array($compare)) {
                $compare = array($compare);
            }

            // Filter out empty values
            $compare = array_filter($compare);

            // Generate the canonical URL
            $canonical_url = home_url('/compare/' . implode('-vs-', $compare));
            echo '<link rel="canonical" href="' . esc_url($canonical_url) . '" />';
        }
    }
}
add_action('wp_head', 'add_canonical_url');

document.addEventListener('DOMContentLoaded', function () {
    const params = new URLSearchParams(window.location.search);
    const compare = params.getAll('compare[]');
    
    if (compare.length > 0) {
        // Generate the clean URL with the new page name
        const cleanUrl = '/compare/' + compare.join('-vs-');
        
        // Update the URL in the browser without reloading the page
        window.history.replaceState({}, document.title, cleanUrl);
    }
});