如何将对象映射到对象数组中，以便在react中选择搜索？

import React, { useState } from 'react';

const ObjectMappingExample = () => {
  const [selectedObject, setSelectedObject] = useState(null);
  const [searchKeyword, setSearchKeyword] = useState('');
  const objectArray = [
    { id: 1, name: 'Object 1', description: 'This is object 1' },
    { id: 2, name: 'Object 2', description: 'This is object 2' },
    { id: 3, name: 'Object 3', description: 'This is object 3' },
    // 更多对象...
  ];

  const handleSearchKeywordChange = (event) => {
    setSearchKeyword(event.target.value);
  };

  const handleObjectSelect = (selected) => {
    setSelectedObject(selected);
  };

  const filteredObjects = objectArray.filter((obj) =>
    obj.name.toLowerCase().includes(searchKeyword.toLowerCase())
  );

  return (
    <div>
      <input
        type="text"
        value={searchKeyword}
        onChange={handleSearchKeywordChange}
        placeholder="Search..."
      />
      <ul>
        {filteredObjects.map((obj) => (
          <li key={obj.id} onClick={() => handleObjectSelect(obj)}>
            {obj.name}
          </li>
        ))}
      </ul>
      {selectedObject && (
        <div>
          <h3>{selectedObject.name}</h3>
          <p>{selectedObject.description}</p>
        </div>
      )}
    </div>
  );
};

export default ObjectMappingExample;