Send Custom Data to Controller

I am new to magento 2. I want to send the day and time option selected by user at checkout to my Controller. When the user selects a day and time slot from the dropdown, it gets the value but I do not know how to send it to my Controller.

Following are my files.

.js file

define(
    [
        'ko',
        'uiComponent',
        'underscore',
        'Magento_Checkout/js/model/step-navigator',
        'Magento_Customer/js/model/customer'
    ],
    function (
        ko,
        Component,
        _,
        stepNavigator,
        customer
    ) {
        'use strict';
        /**
         * check-login - is the name of the component's .html template
         */
        let date = window.checkoutConfig.a4date;
        let latestTime;
        let latestDate;
        let dateValues = date.toString().split(",");
        if (dateValues[0] === '') {
            dateValues = [];
            dateValues.push('Tuesday');
        }
        console.log(dateValues);

        let time = window.checkoutConfig.a4time;
        let timeValues = time.toString().split(",");
        if (timeValues[0] === '') {
            timeValues = [];
            timeValues.push('13:00-16:00');
        }
        console.log(timeValues);


        return Component.extend({
            defaults: {
                template: 'A4_CustomDelivery/check-login'
            },

            //add here your logic to display step,
            isVisible: ko.observable(true),
            isLogedIn: customer.isLoggedIn(),
            //step code will be used as step content id in the component template
            stepCode: 'isLogedCheck',
            //step title value
            stepTitle: 'Delivery Date & Time',

            /**
             *
             * @returns {*}
             */
            initialize: function () {
                this._super();
                // register your step
                stepNavigator.registerStep(
                    this.stepCode,
                    //step alias
                    null,
                    this.stepTitle,
                    //observable property with logic when display step or hide step
                    this.isVisible,

                    _.bind(this.navigate, this),

                    /**
                     * sort order value
                     * 'sort order value' < 10: step displays before shipping step;
                     * 10 < 'sort order value' < 20 : step displays between shipping and payment step
                     * 'sort order value' > 20 : step displays after payment step
                     */
                    15
                );

                return this;
            },

            /**
             * The navigate() method is responsible for navigation between checkout step
             * during checkout. You can add custom logic, for example some conditions
             * for switching to your custom step
             */
            navigate: function () {

            },

            /**
             * @returns void
             */
            navigateToNextStep: function () {
                stepNavigator.next();
                latestTime = this.chosenTime._latestValue[0];
                latestDate = this.chosenDate._latestValue[0];
                console.log(latestDate);
                console.log(latestTime);
            },






            chosenDate : ko.observableArray([dateValues[0]]),
            availableDates : ko.observableArray(
                (dateValues)
            ),
            getDate:function (data, event) {
                //console.log(this.chosenDate());
            },



            chosenTime : ko.observableArray([timeValues[0]]),
            availableTimes : ko.observableArray(
                (timeValues)
            ),
            getTime:function (data, event) {
                //console.log(this.chosenTime());
            },




            transfer : function() {
                const Http = new XMLHttpRequest();
                const str = 'day='+ latestTime + '&time=' + latestDate;
                console.log(latestTime + latestDate);
                const url='http://new_key/dateandtime/index/placeorder?' + str;
                Http.open("GET", url);
                Http.send();

                Http.onreadystatechange = (e) => {
                    alert('ok');
                    console.log("muizzzzz");
                    console.log(latestTime + latestDate);
                    console.log(Http.responseText);
                }
            },
        });
    }
)

I need to send latestDate and latestTime values to my Controller so I can use the data there.

Controller file

<?php

declare(strict_types=1);

namespace A4CustomDeliveryControllerIndex;

use MagentoFrameworkAppActionInterface;
use MagentoFrameworkControllerResultRawFactory;

class placeorder extends MagentoFrameworkAppActionAction
{
    protected MagentoFrameworkViewResultPageFactory $resultPageFactory;
    protected $customerSession;

    public function __construct(
        MagentoFrameworkAppActionContext $context,
        MagentoFrameworkViewResultPageFactory $resultPageFactory
    ) {
        $this->resultPageFactory = $resultPageFactory;
        parent::__construct($context);
    }

    public function execute()
    {
        echo "hi";
        exit();
        //return $this->resultPageFactory->create();
    }
}

Instead of echoing ‘hi’, I need to echo the latestDate and latestTime values here. I think these are the 2 main files needed to send the variable value. If any other file is required, you can ask and I will upload that as well. Thanks!