SharePoint Online using Code Editor webpart to run a js script

Question

Hopefully you can help me. Im trying to make a birthday calander on a client's communication page using the SPS:People-Birthday property, so no one has to manually keep a list updated.The properties are crawled already.

After many other failed attempts, I now have this:

<div id="resultsDiv"></div>
<script type="text/javascript">// <![CDATA[
$(document).ready(function () {
    var e = ExecuteOrDelayUntilScriptLoaded(executeQuery(), "sp.js");
});
 
Date.prototype.AddDays=function(days)
{
    this.setDate(this.getDate() + days);
    return this;
}
 
function executeQuery() {
 
    Results = {
        element: '',
        url: '',
 
        init: function (element) {
            Results.element = element;
 
        var birthday = 'Birthday01';
        var space = '%20'; var colon = '%3A'; var quote = '%22'; var gt = '%3E'; var lt = '%3C'; var amp = '&';
 
            // Get current date
            var currentTime = new Date();
        var startMonth = currentTime.getMonth()+1;
        var day = currentTime.getDate();
 
            // Get current date + 30
        var endTime = new Date();
            var endTime = currentTime.AddDays(30);
        var endMonth = endTime.getMonth()+1;
            var endDay = endTime.getDate();
 
            var querytext = "";
 
        // build query with the magic 2000 year
            if(startMonth!='12')
        {
        querytext += birthday + gt + quote + day + '-' + startMonth + '-' + '2000' + quote + space + 'AND' + space + birthday + lt + quote + endDay + '-' + endMonth + '-' + '2000' + quote;
        }
        else
        {
        querytext += birthday + gt + quote + day + '-' + startMonth + '-' + '2000' + quote + space + 'OR' + space + birthday + lt + quote + endDay + '-' + endMonth + '-' + '2000' + quote;
        }
            Results.url = _spPageContextInfo.webAbsoluteUrl + "/_api/search/query?querytext=%27" + querytext + "%27&sourceid=%27B09A7990-05EA-4AF9-81EF-EDFAB16C4E31%27&selectproperties=%27Title,"+ birthday +",Path%27&sortlist=%27"+ birthday +":ascending%27";
        },
 
        load: function () {
            $.ajax(
                    {
                        url: Results.url,
                        method: "GET",
                        headers: {
                           "accept": "application/json; odata=verbose",
                        },
                        success: Results.onSuccess,
                        error: Results.onError
                    }
                );
        },
 
        onSuccess: function (data) {
            var results = data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results;
        var months = [ "januari", "februari", "maart", "april", "mei", "june", "juli", "augustus", "september", "oktober", "november", "december" ];
            var html = "<div class='birthday'>";
 
            for (var i = 0; i < results.length; i++) {
        var name = results[i].Cells.results[2].Value;
        var date = new Date(Date.parse(results[i].Cells.results[3].Value));
                var link = results[i].Cells.results[4].Value
 
                html += "<span>";
                html += "<a href='"+link+"'>" + name + "</a>";
                html += " "
                html += date.getDate() + " "+ months[date.getMonth()];
                html += " ";
            }
 
        if (results.length == 0)
            {
              html += "Er zijn geen verjaardagen (bekend).";
            }
 
            html += "</div>";
            Results.element.html(html);
        },
 
        onError: function (err) {
            alert(JSON.stringify(err));
        }
    }
 
    Results.init($('#resultsDiv'));
    Results.load();
 
}
 
// ]]></script>

And https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-script-editor/README.md to run the code from.

SPS:People-Birthday mapped to RefinableDate00 with a Birthday01 alias and it doesn't even show the "there are no birthdays today" text that's in the script. Thats with calling the script from SiteAssests/script.js or just pasting the script in the script editor directly. Scripts are enabled on the site. The Script Editor webpart works as well, if I throw in some html code it displays that perfectly fine. I am completely lost, does anyone have any idea how I am getting this to work? Or if someone has a different suggestion how to make a low-maintanace birthday calander, I am open for suggestions. As long as it doesn't need manual upkeep.

I have tried to call the script, run the script directly, and some proof that the widget does work. Calling script Directly entering script code Webpart showing the text I entered Birthday property is filled in the user profiles [Crawled property mapped to managed property with an alias] (https://i.stack.imgur.com/ySJjg.png)

What I expect to happen is to see a printed array of people who meet the criteria, or a the text "er zijn geen verjaardagen".