React导航如何动态更改每个选项卡的标题导航标题？

import React, { useState } from 'react';

const Navigation = () => {
  const [tabTitles, setTabTitles] = useState(['Tab 1', 'Tab 2', 'Tab 3']);

  const handleTitleChange = (index, newTitle) => {
    const newTabTitles = [...tabTitles];
    newTabTitles[index] = newTitle;
    setTabTitles(newTabTitles);
  };

  return (
    <div>
      {tabTitles.map((title, index) => (
        <Tab
          key={index}
          title={title}
          onTitleChange={(newTitle) => handleTitleChange(index, newTitle)}
        />
      ))}
    </div>
  );
};

const Tab = ({ title, onTitleChange }) => {
  const handleInputChange = (event) => {
    onTitleChange(event.target.value);
  };

  return (
    <div>
      <input type="text" value={title} onChange={handleInputChange} />
    </div>
  );
};

export default Navigation;