如何使用React.js将来自不同页面的表单的输入值添加到表格中？

import React, { useState } from "react";

function FormComponent({ onSubmit }) {
  const [inputValue, setInputValue] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(inputValue);
    setInputValue("");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

function TableComponent({ data }) {
  return (
    <table>
      <thead>
        <tr>
          <th>Input Value</th>
        </tr>
      </thead>
      <tbody>
        {data.map((item, index) => (
          <tr key={index}>
            <td>{item}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function ParentComponent() {
  const [tableData, setTableData] = useState([]);

  const handleFormSubmit = (inputValue) => {
    setTableData([...tableData, inputValue]);
  };

  return (
    <div>
      <FormComponent onSubmit={handleFormSubmit} />
      <TableComponent data={tableData} />
    </div>
  );
}

export default ParentComponent;