I've been following the documentation for the webview2 on microsoft's official website but I have encountered a problem that I am not sure how to fix.

I have added a .NET object using AddHostObjectToScript and it works as long as the function has no parameter. When calling the object function that has a parameter in JS, I keep on getting a "parameter is incorrect" error.

This is how I am calling the host objects in angular app:

result = await window?.chrome?.webview?.hostObjects.bridge.Func("John");

and this is from my WinUI 3.0 app:

    [ComVisible(true)]
    public class Bridge
    {
        public string Func(string param)
        {
            return "Example: " + param;
        }

        public string Sample()
        {
            return "Example: ";
        }
        public BridgeAnotherClass AnotherObject { get; set; } = new BridgeAnotherClass();

        // Sample indexed property.
        [System.Runtime.CompilerServices.IndexerName("Items")]
        public string this[int index]
        {
            get { return m_dictionary[index]; }
            set { m_dictionary[index] = value; }
        }
        private Dictionary<int, string> m_dictionary = new Dictionary<int, string>();
    }


    
    public sealed partial class WebViewPage : Page
    {
        public WebViewViewModel ViewModel { get; }

        public WebViewPage()
        {
            ViewModel = Ioc.Default.GetService<WebViewViewModel>();
            InitializeComponent();
            ViewModel.WebViewService.Initialize(webView);
            webView.WebMessageReceived += getMsg;
            InitializeAsync();
        }

        async void InitializeAsync()
        {
            await webView.EnsureCoreWebView2Async();
            var interop = webView.CoreWebView2.As<ICoreWebView2Interop>();
            interop.AddHostObjectToScript("bridge", new Bridge());
            
        }