.NET 6 TempData is always empty in controller

Question

I know this seems like a duplicate of so many other issues, but I've tried all the suggestion and is still not working.

I have 2 dummy buttons on view, one to set some value into TempData and another one to get the value of previously saved TempData, and on the action to get TempData, is always empty.

I've configure my TempData provider as described in Microsoft documentation but is still not working, I'm not sure what did I missed in Program.cs or is my configuration sequence is wrong?

Program.cs

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
builder.Services.AddDistributedMemoryCache();

//Tried .AddController().AddSessionStateTempDataProvider() & AddControllersWithViews().AddSessionStateTempDataProvider(), all not working
builder.Services.AddMvc().AddSessionStateTempDataProvider();

builder.Services.AddSession(options =>
{
    options.IdleTimeout = TimeSpan.FromSeconds(10);
    options.Cookie.HttpOnly = true;
    options.Cookie.IsEssential = true;
});

builder.Services.AddControllers().AddJsonOptions(opts => opts.JsonSerializerOptions.PropertyNamingPolicy = null);

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.UseSession();
app.MapRazorPages();

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Map}/{action=Index}/{id?}");
});

app.Run();

My cshtml code:

$('#btnTestSetTempData').on('click', function () {
    var response = {}; //some JSON data here
    
    $.ajax({
        url: '@Url.Action("TestSetTempData", "MyTest")',
        cache: false,
        traditional: true,
        type: "POST",
        data: JSON.stringify(response),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data, textStatus, XMLHttpRequest) {
            console.log(`${Date.now()} - ${data}`);
        },
        error: function (jqXhr, textStatus, errorThrown) {
            
            console.log('Set TempData Error : ' + errorThrown);
        }
    });
});

$('#btnTestGetTempData').on('click', function () {
    $.ajax({
        url: '@Url.Action("TestGetTempData", "MyTest")',
        cache: false,
        traditional: true,
        type: "POST",
        dataType: "json",
        success: function (data, textStatus, XMLHttpRequest) {
            console.log(`${Date.now()} - ${data}`);
        },
        error: function (jqXhr, textStatus, errorThrown) {
            console.log('Get TempData Error : ' + errorThrown);
        }
    });
});

MyTest controller:

[HttpPost]
public ActionResult TestSetTempData([FromBody] SomeModel theModel)
{
    TempData["SomeModel"] = JsonSerializer.Serialize(theModel);
    TempData.Keep("SomeModel");
    return Json(null);
}

public ActionResult TestGetTempData()
{
    //TempData count is always 0 and will jump to the last line
    if (TempData["SomeModel"] != null)
    {
        var viewModel = JsonSerializer.Deserialize<SomeModel>(TempData["SomeModel"] as string);
        TempData.Keep();
        return Json(viewModel.CallId);
    }
    return Json(null);
}