How to setstate for a variable on React webpage from Cefsharp browser?

Question

I have a React webpage embed in Cefsharp browser. I'm trying to login to the website when the app loads with a generic username and password.

I'm able to populate the input elements with values using:

EvaluateScriptAsync (document.getElementById('email').value= "abc@email.com")

However, looks like the value is not recognized by the Login method because they are not getting bound to state variable (for ex: this.state.username is not getting set to abc@email.com). Is there a way to setstate for a variable using EvaluateScriptAsync?

Here is what I've tried:

public MainWindow()
        {
            CefSettings settings = new CefSettings();
            settings.CachePath = Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData) +
                                 @"\CEF\cache";
            CefSharp.Cef.Initialize(settings);
            InitializeComponent();
            Browser.LoadingStateChanged += async (sender, args) =>
            {
                //Wait for the Page to finish loading
                if (args.IsLoading == false)
                {
                    await Browser.EvaluateScriptAsync("document.getElementById('email').value='abc@email.com';");
                    await Browser.EvaluateScriptAsync("document.getElementById('password').value='password'";);
                    await Browser.EvaluateScriptAsync("document.getElementById('login').click()");
                }
            };
        }