Can't auto fill contents by tampermonkey

Question

There is a table which I'll fill in on the webpage
I want to auto fill some input box of it.

<input type="text" autocomplete="off" placeholder="Please enter" maxlength="40" class="el-input__inner">

I tried Tampermonkey with the help of GPT, and it worked partly...

// ==UserScript==
// @name         auto fill variable params
// @namespace    http://tampermonkey.net/
// @version      2024-03-14
// @description  try to take over the world!
// @author       You
// @match        xxx
// @icon         https://www.google.com/s2/favicons?sz=64&domain=jirongyunke.net
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    setTimeout(() => {
        console.log('auto fill variable params');
        const arr = ['bizId','tenantId','mid','custId'];
        const params = Array.from(document.getElementsByClassName("el-table_1_column_4 is-center")).filter(element => element.classList.length===2);
        params.forEach(p =>{
            p.getElementsByClassName("el-input__inner")[0].value = arr.shift();
        });
    }, 2000);
})();

Now when I open this page, It's auto filled, but when I click submit, the page throw the error like I didn't fill it.

Here's the console error:

{
    "Variable.0.name": [
        {
            "message": "Name is required",
            "field": "Variable.0.name"
        }
    ],
    "Variable.1.name": [
        {
            "message": "Name is required",
            "field": "Variable.1.name"
        }
    ],
    "Variable.2.name": [
        {
            "message": "Name is required",
            "field": "Variable.2.name"
        }
    ],
    "Variable.3.name": [
        {
            "message": "Name is required",
            "field": "Variable.3.name"
        }
    ]
}

It doesn't work until I maunally edit the contents.
I'm new to javascript, I guess the page may be using some framework such as Vue or React.
Can I improve my script to achieve the auto fill feature?