如何使用我的react组件PlaceInput在菜单输入框中实现place autocomplete？

import React, { useState } from 'react';
import PropTypes from 'prop-types';

const PlaceInput = ({ onSelectPlace }) => {
  const [place, setPlace] = useState('');

  // 处理输入框变化事件
  const handleInputChange = (event) => {
    setPlace(event.target.value);
  };

  // 处理地点选择事件
  const handlePlaceSelect = (selectedPlace) => {
    setPlace(selectedPlace);
    onSelectPlace(selectedPlace);
  };

  return (
    <input
      type="text"
      value={place}
      onChange={handleInputChange}
      placeholder="输入地点"
    />
  );
};

PlaceInput.propTypes = {
  onSelectPlace: PropTypes.func.isRequired,
};

export default PlaceInput;

import React, { useState } from 'react';
import PlaceInput from './PlaceInput';

const App = () => {
  const [selectedPlace, setSelectedPlace] = useState('');

  // 处理地点选择事件
  const handlePlaceSelect = (place) => {
    setSelectedPlace(place);
  };

  return (
    <div>
      <h1>地点自动完成示例</h1>
      <PlaceInput onSelectPlace={handlePlaceSelect} />
      <p>已选择的地点：{selectedPlace}</p>
    </div>
  );
};

export default App;