In Angular2, how do I display an object consisting of a Tuple that's sent from a .NET Core controller?

Question

I have the following controller:

[Route("api/[controller]")]
[ApiController]
public class TestController : ControllerBase
{
    [HttpGet]
    public IActionResult Test()
    {
        return Ok(new {
            val1 = "value 1",
            val2and3 = ("value 2", "value 3")
        });
    }
}

I also have the following interface and function in Angular:

export interface TestInterface {
  val1: string;
  val2and3: [string, string];
}

getTest(): Observable<TestInterface> {
  const data$ = this.httpClient
    .get<TestInterface>(this.baseUrl + 'api/Test');

  return data$.pipe(
    tap(data => console.log(JSON.stringify(data)))
  );
}

A problem seems to occur in the getTest() function above when I try to obtain data from the controller. In its tap function, I'm able to log the non-Tuple string's value but not those of the Tuple. console.log outputs what follows: {"val1":"value 1","val2and3":{}}

I call getTest() from another place in Angular, with the following lines of code:

let values: TestInterface | undefined;

this.apiService.getTest().subscribe({
  next: data => values = data
});

console.log('Values:' + values?.val2and3);

Logging values?.val2and3 results in the following output: Values:undefined.

I'm too new to Angular to discover what's going wrong. How do I achieve my objective (which is to define the values variable with all the data sent by the controller)?