How to load a ViewComponent in JavaScript dynamically?

Question

I am trying to invoke a ViewComponent by calling a controller action in JavaScript, but it gives this error:

NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load ''.

and

Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR

I need to use JavaScript because I need to pass different parameters selected from the page and load the component each time.

JavaScript code:

function filterPanelChanged(e) {
            let filterPanelOptions = e.detail;

            if (filterPanelOptions.viewReport) {
                               
                $('#reports-section').empty();

                let url = '@Url.Action("GetReportViewComponent", "MyController")';
                
                    fetch(url, { headers: { Authorization: "Bearer " + window.Auth.AccessToken, "accept": "application/json", "Access-Control-Allow-Origin": "*" }, "crossDomain": true, method: "POST", body: filterPanelOptions }).then(function (response) {
                        if (response.ok) {
                            response.text().then(function (result) {
                                console.log(result);
                                $('#reports-section').html(result);
                                $('#reports-section').show();
                            });
                        }
                    });
            }
            else
            {
                $("#reports-section").hide();
            }
        }

Controller code:

        [HttpPost]
        public IActionResult GetReportViewComponent(FilterOptions filterOptions)
        {    
            return this.ViewComponent("ReportViewer", new
            {
                Name = "Reports/MyReport.repx",
                Parameters = $"param1={filterOptions.Param1}&ActiveDate=2023-02-01&param2={filterOptions.Param2}&param3={filterOptions.Param3}",
                ShowParameters = false
            });
        }

        public class FilterOptions
        {
            public long Param1{ get; set; }

            public long Param2{ get; set; }

            public long? Param3{ get; set; }

            public DateTime? ActiveDate { get; set; }
        }

What am I doing wrong in my instance?