Get the value of rows and column inputs fields of dynamically created table in REACT.js

Question

I am trying to get the values of inputs field of rows and columns of my dynamically created table, but I saw noting on console.

Here is my code .

import React, { createElement, useState } from 'react'

function Add() {
    const [val1, setVal1] = useState(null)
    const [val2, setVal2] = useState(null)

    const n = val2;
    const m = val1;

    const ma1 = document.getElementById("matrix1")
    const tab = document.getElementById("tab")
    const Val1 = (val) => {
        setVal1(val.target.value)

    }
    const Val2 = (val) => {
        setVal2(val.target.value)
    }


    const Val = () => {
        for (let i = 1; i <= m; i++) {
            var tr = document.createElement('tr')

            for (let j = 1; j <= n; j++) {
                var td = document.createElement("td")

                var textd = document.createElement("input")
                textd.id = "id"
                textd.name = i
                textd.className = "inputField"

                td.appendChild(textd)
                tr.appendChild(td)
            }
            tab.appendChild(tr)
        }
    }
    const inputf = document.querySelectorAll(".inputField")

    for (let i = 0; i < inputf.length; i++) {
        inputf[i].addEventListener(("click", (e) => {
            if (e.target.classList.contains("inputField")) {
                alert(e.target.value)
            }
        }))
    }
    return (
        <div className='Menu-box' >
            Add
            <button onClick={Val} >click</button>
            <input type="text" onChange={Val1}></input>
            <input type="text" onChange={Val2}></input>

            <div id='matrix1'  >
                <table id='tab'></table>
            </div>
            <div id='matrix2' ></div>
        </div>
    )
}

export default Add

I am trying to create two matrix and get stored their values in array, but I cannot get the values of input fields by above method .