Model Binding fails silently (HTTP 400)

[Kevin24]

I am trying to make a full stack ASP.NET application using razor pages. In my page, I am trying to make a form submit data properly. Here is my view page with the form:

@page
@model RogersPizza.Pages.OrderModel
@{
    Layout = "Shared/_Layout.cshtml";
}
@section title {
    <title>Order</title>   
}
@section scripts {
    
}
@section siteMenu {
    <div name="Site Menu">
        <table width="100%">
            <tr>
                <th><a href="Index">Rogers Pizza</a></th>
                <th><a href="Menu">Menu</a></th>
                <th>Order</th>
                <th><a href="About">About</a></th>
                <th><a href="Contact">Contact</a></th>
                <th><a href="Employees">Employees</a></th>
            </tr>
        </table>
    </div>
    
}

@section body {
    <div name="Order UI"></div>
        <form method="post">
        <label align="center">Choose your pizza</label>
        <select asp-for="Order.Pizza" id="pizzas" align="center" required>
            @foreach(var item in Model?.Pizzas)
            {
                <!-- <option>@Html.DisplayFor(modelItem => item.Name)</option> -->
                <option value="@item.Name">@item.Name</option>
            }
        </select>
        <div id= "payment-options"></div>
        <script src="~/js/paymentOptionsBundled.js"></script>

        <input type="hidden" asp-for="Order.PaymentOption" id="selectedPaymentOption" />
        <input type="hidden" asp-for="Order.GiftCardNumber" id="giftCardNumber" value="9999999999999999"/>
        <input type="hidden" asp-for="Order.ID" name="Order.ID" value="999">
        <input type="submit" value="Place Order" />
        </form>       
    </div>
}

Here is the react script inside the form:

import React from 'react';
import { useState, useEffect } from 'react';
import { createRoot } from 'react-dom/client';

export default function PaymentOptions() {
    const [paymentOption, setPaymentOption] = useState("cash");
    const [giftCard, setGiftCard] = useState("");

    useEffect(() => {
        const paymentInput = document.getElementById('selectedPaymentOption');
        const giftCardInput = document.getElementById('giftCardNumber');

        if (paymentInput) {
            paymentInput.value = paymentOption;
        }       
        if (giftCardInput) {
            if(paymentOption === "cash")
            {
                giftCardInput.value = "9999999999999999";
            }
            else if(paymentOption === "giftCard")
            {
                giftCardInput.value = giftCard || "";
            }
            
        }
    }, [paymentOption, giftCard]);

    const handlePaymentMethodChange = (e) => {
        setPaymentOption(e.target.value);
    };

    const handleGiftCardChange = (e) => {
        setGiftCard(e.target.value);
    };

    return (
        <div>
            <div name="selectPaymentMethod">
                <p>Please select a payment method</p>
            </div>

            <select name="paymentOptions" value={paymentOption} onChange={handlePaymentMethodChange}>
                <option value="cash">Cash</option>
                <option value="giftCard">Gift Card</option>
            </select>

            {paymentOption === "cash" &&
                <div name="cash">
                    <p>Please have your cash ready when receiving your order.</p>
                </div>
            }

            {paymentOption === "giftCard" &&
                <div name="giftCard">
                    <p>Please enter your gift card number below.</p>
                    <input
                        type="text"
                        id="giftCardInput"
                        inputmode="numeric"
                        placeholder="Enter gift card number"
                        min="0"
                        minlength="16"
                        maxlength="16"
                        pattern="[0-9]{16}"
                        value={giftCard}
                        onChange={handleGiftCardChange}
                        required
                    />
                </div>
            }
        </div>
    );
}

const domNode = document.getElementById('payment-options');
if (domNode) {
    const root = createRoot(domNode);
    root.render(<PaymentOptions />);
}

Here is the model page:

using Microsoft.AspNetCore.Http.HttpResults;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;
using RogersPizza.Models;

namespace RogersPizza.Pages
{
    public class OrderModel : PageModel
    {
        private readonly RogersPizza.Data.StoreContext _context;
        private readonly ILogger<OrderModel> _logger;
        [BindProperty] public Order? Order { get; set; }

        public OrderModel(RogersPizza.Data.StoreContext context, ILogger<OrderModel> logger)
        {
            _context = context;
            _logger = logger;
        }

        public IList<Pizza>? Pizzas { get; set; }
        public async Task OnGetAsync()
        {
            Pizzas = await _context.Pizzas.ToListAsync();
        }

        public IActionResult OnPost()
        {
            _logger.LogInformation("Received order: Pizza={Pizza}, Payment={PaymentOption}, GiftCard={GiftCardNumber}",
        Order?.Pizza, Order?.PaymentOption, Order?.GiftCardNumber);
            return RedirectToPage("/Index");
        }

        // private bool ValidateOrder(Order order)
        // {
        //     return false;
        // }
    }
}

Here is the Order model used when binding the form:

namespace RogersPizza.Models
{
    public class Order
    {
        public int? ID { get; set; }
        public required string Pizza { get; set; }
        public required string PaymentOption { get; set; }
        public string? GiftCardNumber { get; set; }
    }
}

Currently, my form bonding fails when submitting the form and I get a 400 error message page with the following message in the console:

Failed to load resource: the server responded with a status of 400 ()

How can I get my form to submit properly?