在React中创建接受下拉选项中找不到的值的多选

import React, { useState } from 'react';

const MultiSelect = () => {
  const [selectedValues, setSelectedValues] = useState([]);

  const handleOptionSelect = (value) => {
    setSelectedValues([...selectedValues, value]);
  };

  const handleInputChange = (event) => {
    const value = event.target.value;
    if (!selectedValues.includes(value)) {
      setSelectedValues([...selectedValues, value]);
    }
  };

  return (
    <div>
      <select onChange={(event) => handleOptionSelect(event.target.value)}>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
      </select>
      <input type="text" onChange={handleInputChange} />
      <div>
        Selected Values:
        {selectedValues.map((value) => (
          <span key={value}>{value}</span>
        ))}
      </div>
    </div>
  );
};

export default MultiSelect;