下面是AddCourse.tsx上的代码。我想显示来自API的教师姓名。它在控制台日志上运行良好，但它没有显示在服务器选项中。

const [instructorOptions, setInstructorOptions] = useState<
    Array<{ id: string; value: string; label: string }>
  >([]);

const fetchOptions = async () => {
    try {
      const response = await axios.get(`${API_URL}/instructor`);
      const instructorList: Array<{ id: string; name: string }> =
        response.data.data.instructor_list;

      if (instructorList.length > 0) {
        const options = instructorList.map((instructor) => ({
          id: instructor.id,
          value: instructor.name,
          label: instructor.name,
        }));
        setInstructorOptions(options);
        console.log('options : ', options);
      }
    } catch (error) {
      console.error('Error fetching instructors:', error);
      // Handle error, set appropriate state if needed
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchOptions();
  }, []);

  const handleSelect = (selectedOption: any) => {
    // Lakukan sesuatu dengan opsi yang dipilih, misalnya simpan di state
    console.log('Opsi yang dipilih:', selectedOption);
  };

个字符
这是InputDropDown组件：

import React, { useState } from 'react';
import Select from 'react-select';
import { BsTrash3 } from 'react-icons/bs';

function InputDropDown({ options, onSelect, text }: any) {
  const [optionsAvailable, setOptionsAvailable] = useState<string[]>(options);
  const [option, setOption] = useState<string[]>([]);
  const [selectedOption, setSelectedOption] = useState('');

  const handleSelectChange = (selectedOption: any) => {
    if (selectedOption && !option.includes(selectedOption)) {
      setOption((prevOptions) => [...prevOptions, selectedOption]);

      const updatedOptions = optionsAvailable.filter(
        (option: any) => option !== selectedOption,
      );

      setOptionsAvailable(updatedOptions);
    }
    setSelectedOption('');
  };

  const handleOptionRemove = (optionId: any) => {
    const updatedoptions = option.filter((item: any) => item.id !== optionId);
    console.log(updatedoptions);
    setOption(updatedoptions);

    //update options available
    const deletedOptions = options.filter((item: any) => item.id === optionId);
    setOptionsAvailable((prevOptions) => {
      const newOptions = [...prevOptions, ...deletedOptions];
      // Sort the newOptions array by id in ascending order
      newOptions.sort((a, b) => a.id - b.id);
      return newOptions;
    });
  };

  return (
    <>
      <label className="mt-3 mb-3 block text-black dark:text-white">
        {text}
      </label>
      <Select
        value={selectedOption}
        onChange={handleSelectChange}
        options={optionsAvailable}
        isSearchable={true} // Aktifkan fitur pencarian
        placeholder="Pilih salah satu..."
      />
      <br />
      {option.map((data: any) => (
        <div className="flex mt-3 flex-row gap-2" key={data.id}>
          <div className="bg-primary text-white rounded-md px-2 py-1">
            {data.value}
          </div>
          <button
            onClick={() => handleOptionRemove(data.id)}
            className="bg-[#EF4444] text-white rounded-md px-2 py-1"
          >
            <BsTrash3 />
          </button>
        </div>
      ))}
    </>
  );
}

export default InputDropDown;

型
即使在console.log中出现选项，选项也不会出现：

的数据
如何使我的代码可以在选项中显示导师的名字？