Визуализация значений на основе поиска с уникальным идентификатором — ReactJS

я использую reactjs, nodejs и mysql... который извлекает данные из базы данных. Сейчас моя проблема заключается в том, что мне нужно показать строку только на основе значений поиска, возможно, не включая кнопку отправки (например, поиск Google)

вот моя ссылка для получения NodeJS, поэтому, если я введу http:\localhost\productlist\3, тогда он отобразит 3-й продукт только в NodeJS, но я хочу реализовать ту же функциональность в reactjs, а также через окно поиска

app.get("/productslist/:idaddproducts", (req, res) => {
  const id = req.params.idaddproducts
  console.log(id)
  connection.query("SELECT * FROM `addproducts` where idaddproducts = ? ",id,(err, rows) => {
    if (!err) console.log(rows), res.json({ data: rows });
    //data variable is not mandatory but inorder to pass the result we need it
    else console.log(err);
    // connection.end()
  });
});

и вот мой реагирующий js-код

export default function MaterialTableDemo() {
  const initialState = {
    idaddproducts: "",
    productName: "",
    productId: "",
    productBrand: "",
    productQuantity: "",
    productPrice: "",
    productType: ""
  };
  const [poName, pnName] = React.useState(initialState);

  const handleName = e => {
    e.preventDefault();
    pnName({ ...poName, [e.target.name]: e.target.value });
    console.log(poName);
  };

  async function handleTable(e) {
    const res = await fetch("http://localhost:4000/productslist/:id");
    const data = await res.json();
    pnName(data.data);
    console.log(data.data);
  }

  useEffect(() => {
    handleTable();
  }, []);

  const classes = useStyles();
  return (
    <form className={classes.root} noValidate autoComplete="off" align="center">
      <div className={classes.formGroup}>
        <FormControl>
          <Input
            type="search"
            label="Product ID"
            variant="outlined"
            size="small"
            placeholder="Enter Product ID"
            value={poName.idaddproducts}
            name="idaddproducts"
            onChange={handleName}
          />
        </FormControl>
        {poName.length &&
          poName.map(v => {
            return (
              <h4 key={v.idaddproducts}>
                {v.productName}
                {v.productId}
                {v.productBrand}
                {v.productQuantity}
                {v.productPrice}
                {v.productType}
              </h4>
            );
          })}
      </div>
    </form>
  );
}

Любая помощь будет высоко ценится