Different option values and texts for dynamic select fields

Hello, since leaving version 5.8.7 we have had an issue with an important form. We can’t get it solved.

We use the filter “wpcf7_form_tag_data_option” to dynamically fill a select field with options. => [select product data:some_products]

On the server side we have filled out all the options and they are displayed correctly on the front.

We have some pages where the “value” attributes and the associated option text are adjusted dynamically on the client side.

On the server side, we can apparently(?) only specify the text values for the options.
The front end becomes the following:

• value: product 1, text: product 1
• value: product 2, text: product 2
• value: product 3, text: product 3
  …

On the client side, we do the following on some pages using JavaScript:

• value: id 1, text: name 1
• value: id 2, text: name 2

We adjust both the value and the text values if that makes sense in the respective context.

Since we left 5.8.7, forms can no longer be sent this way.
Apparently there is some server-side validation of the option value in one of the subsequent versions, which now fails.

If we have the option to specify all options with value and text on the server side and limit validation to the value value, then we could solve the problem and forms should go through again, I think.

So our goal is to specify the following on the server side:

• value: id 1, text: name 1
• value: id 2, text: name 2
• value: id 3, text: name 3

On the client side we should have the ability to change the text values and remove some options from DOM using JavaScript.

We have already tried pipe notation.
Doesn’t seem to work.

add_filter('wpcf7_form_tag_data_option', 'wporg_exmaple', 10, 3);
function wporg_exmaple($data, $options, $args) {
    $data = [];
    foreach ($options as $option) {
        if ($option !== 'some_products')
            continue;
        
        $products = wc_get_products(
            array(
                'orderby'  => 'name',
                'limit' => -1,
                'status' => 'publish',
                'category' => ['abc', 'xyz'],
            )
        );

        $select_options = array_map(function ($p) {
            return "{$p->get_name()}|{$p->get_id()}";
        }, $products);

        $data = array_merge($data, $select_options);
    }

    return $data;
}

Using the above filter, how can we define the “value” attribute and display the text value independently?

Then we can continue to manipulate the select on the client side and adjust the text values if necessary without violating the server-side value validation.