如何使用React和Firebase将来自两个输入的数据呈现为两个不同的元素？

import React, { useState, useEffect } from 'react';
import firebase from 'firebase/app';
import 'firebase/database';

const firebaseConfig = {
  // 在这里填写你的Firebase配置信息
};

firebase.initializeApp(firebaseConfig);
const database = firebase.database();

function DataForm() {
  const [input1, setInput1] = useState('');
  const [input2, setInput2] = useState('');

  const handleInput1Change = (event) => {
    setInput1(event.target.value);
  };

  const handleInput2Change = (event) => {
    setInput2(event.target.value);
  };

  const handleSubmit = () => {
    database.ref('data').set({
      input1,
      input2,
    });
  };

  return (
    <div>
      <input type="text" value={input1} onChange={handleInput1Change} />
      <input type="text" value={input2} onChange={handleInput2Change} />
      <button onClick={handleSubmit}>保存数据</button>
    </div>
  );
}

function DataDisplay() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const dataRef = database.ref('data');
    dataRef.on('value', (snapshot) => {
      const newData = snapshot.val();
      setData(newData);
    });

    return () => {
      dataRef.off();
    };
  }, []);

  return (
    <div>
      {data && (
        <div>
          <p>输入1的数据：{data.input1}</p>
          <p>输入2的数据：{data.input2}</p>
        </div>
      )}
    </div>
  );
}

function App() {
  return (
    <div>
      <DataForm />
      <DataDisplay />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));