Issues with Displaying Selected Developers and Testers in React

I am working on a React application to manage change requests, specifically for displaying selected developers and testers.

When I toggle the edit panel for a change request, I can successfully fetch and set the assigned developers and testers. However, when I try to display their names, I only see the remove button (×) for each name, and the background color is applied, but the actual names do not appear.

Here is the relevant code snippet I am using to display the selected developers and testers:

{showEditSection && (
  <div className="w-1/4 ml-2 mr-2 relative transition-transform duration-300 shadow-md transform translate-x-1 bg-white p-5">
    <div className="flex items-start border-b mb-4 border-solid border-blueGray-200">
      <h2 className="text-1xl font-bold	">Modify Assignment</h2>
      <button
        className="p-0 ml-auto bg-transparent border-0 text-black float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
        onClick={() => setShowEditSection(false)}
      >
        <span className="bg-transparent pb-9 text-black h-5 w-6 text-2xl block outline-none focus:outline-none">
          ×
        </span>
      </button>
    </div>
    <form method="POST" onSubmit={updateDeveloperAndTester}>
      {/* Section Developer */}
      <div>
        <div className="mt-2">
          <label className="block text-sm ml-2 font-medium leading-6 text-gray-900">Developer</label>
          <select
            className="ml-2 w-full py-3 border border-gray-300 rounded-md"
            onChange={handleDeveloperChangeEdit}
          >
            <option >Select developer</option>
            {developers.map(dev => (
              <option key={dev.id} value={dev.id}>
                {dev.name}
              </option>
            ))}
          </select>
        </div>

        {/* Display selected developers */}
        <div className="mt-2">
          {selectedDevelopersEdit.length > 0 && (
            <div>
              <label className="block text-sm ml-2 font-medium leading-6 text-gray-900">Selected Developers:</label>
              <div className="flex flex-wrap gap-2 ml-2 mt-2">
              {selectedDevelopersEdit.map((dev, index)  => (
                  <span key={index} className="flex items-center bg-blue-100 text-blue-800 rounded-full px-3 py-1 text-sm font-medium">
                    {dev.name}
                    <button
                      type="button"
                      className="ml-2 text-red-500 hover:text-red-700"
                      onClick={() => removeDeveloperEdit(dev.id)}
                    >
                      ×
                    </button>
                  </span>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Section Tester */}
      <div>
        <div className="mt-2">
          <label className="block text-sm ml-2 font-medium leading-6 text-gray-900">Tester</label>
          <select
            className="ml-2 w-full py-3 border border-gray-300 rounded-md"
            onChange={handleTesterChangeEdit}
          >
            <option value="">Select tester</option>
            {testers.map(tester => (
        <option key={tester.id} value={tester.id}>
          {tester.name}
        </option>
      ))}
          </select>
        </div>

        {/* Display selected testers */}
        <div className="mt-2">
          {selectedTestersEdit.length > 0 && (
            <div>
              <label className="block text-sm ml-2 font-medium leading-6 text-gray-900">Selected Testers:</label>
              <div className="flex flex-wrap gap-2 ml-2 mt-2">
              {selectedTestersEdit.map((tester, index)=> (
                  <span key={index} className="flex items-center bg-green-100 text-green-800 rounded-full px-3 py-1 text-sm font-medium">
                    {tester.name}
                    <button
                      type="button"
                      className="ml-2 text-red-500 hover:text-red-700"
                      onClick={() => removeTesterEdit(tester.id)}
                    >
                      ×
                    </button>
                  </span>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Submit button */}
      <button
        type="submit"
        className="flex w-full mt-4 ml-2 justify-center rounded-md bg-amber-600 px-3 py-3 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-gray-500 focus-visible:outline"
      >
        Update
      </button>
    </form>
  </div>
)}

and this the methods :

    const handleToggleDetails = async (requestId) => {
      if (expandedRowId === requestId) {
        setExpandedRowId(null);
        return;
      }
    
      try {
        const response = await axiosClient.get(`/change-request/${requestId}/assignments`);

        if (response.data) {
          setAssignedMembers(prevState => ({
            ...prevState,
            [requestId]: response.data
          }));
    
          // Initialisez les états avec les noms des développeurs et testeurs
          setSelectedDevelopersEdit(response.data.developers);
          setSelectedTestersEdit(response.data.testers);
          console.log("Assignments response: ", response.data);
          console.log("Developers: ", response.data.developers);
          console.log("Testers: ", response.data.testers);
          

        }
        setExpandedRowId(requestId);
      } catch (error) {
        console.error('Error fetching assignments:', error);
      }
    };
    
    
    const handleDeveloperChange = (event) => {
      const selectedDevId = event.target.value;
      const selectedDev = developers.find(dev => dev.id === parseInt(selectedDevId));
  
      if (selectedDev && !selectedDevelopers.some(dev => dev.id === selectedDev.id)) {
          setSelectedDevelopers([...selectedDevelopers, selectedDev]);
      }
  };

  const handleDeveloperChangeEdit = (event) => {
    const selectedDevId = parseInt(event.target.value);  // ID au lieu de nom
    const selectedDev = developers.find(dev => dev.id === selectedDevId);  // Trouver l'objet developer
  
    if (selectedDev && !selectedDevelopersEdit.some(dev => dev.id === selectedDev.id)) {
      setSelectedDevelopersEdit([...selectedDevelopersEdit, selectedDev]);
    }
  };
  
  const removeDeveloperEdit = (developerId) => {
    const updatedDevelopers = selectedDevelopersEdit.filter(dev => dev.id !== developerId);
    setSelectedDevelopersEdit(updatedDevelopers);
  };
  

  // Function to remove a developer from the selected list
  const removeDeveloper = (developerId) => {
      const updatedDevelopers = selectedDevelopers.filter(dev => dev.id !== developerId);
      setSelectedDevelopers(updatedDevelopers);
  };

  const handleTesterChangeEdit = (event) => {
    const selectedTesterId = parseInt(event.target.value);  // ID au lieu de nom
    const selectedTester = testers.find(tester => tester.id === selectedTesterId);
  
    if (selectedTester && !selectedTestersEdit.some(tester => tester.id === selectedTester.id)) {
      setSelectedTestersEdit([...selectedTestersEdit, selectedTester]);
    }
  };
  
  const removeTesterEdit = (testerId) => {
    const updatedTesters = selectedTestersEdit.filter(tester => tester.id !== testerId);
    setSelectedTestersEdit(updatedTesters);
  };
  

  const handleTesterChange = (event) => {
    const selectedTesterId = event.target.value;
    const selectedTester = testers.find(tester => tester.id === parseInt(selectedTesterId));
  
    if (selectedTester && !selectedTesters.some(tester => tester.id === selectedTester.id)) {
      setSelectedTesters([...selectedTesters, selectedTester]); // Ajoutez l'objet complet
    }
  };
  
// Function to remove a tester from the selected list
const removeTester = (testerId) => {
    const updatedTesters = selectedTesters.filter(tester => tester.id !== testerId);
    setSelectedTesters(updatedTesters);
};

Current Issues: Names Not Displaying: Instead of the developers' and testers' names, only the remove button and background color are visible. Removal Functionality: When I click the remove button for one name, it seems to remove all names instead of just the selected one. Any help on how to resolve these issues would be greatly appreciated!