Multi Select Search Using ReactJS

// App.jsx 
import { useEffect, useRef, useState } from "react";
import "./App.css";
import Pill from "./components/Pill";

function App() {
	const [searchTerm, setSearchTerm] = useState("");
	const [suggestions, setSuggestions] = useState([]);
	const [selectedUsers, setSelectedUsers] = useState([]);
	const [selectedUserSet, setSelectedUserSet] = useState(new Set());
	const [activeSuggestion, setActiveSuggestion] = useState(0);

	const inputRef = useRef(null);

	useEffect(() => {
		const fetchUsers = () => {
			setActiveSuggestion(0);
			if (searchTerm.trim() === "") {
				setSuggestions([]);
				return;
			}

			fetch(`https://dummyjson.com/users/search?q=${searchTerm}`)
				.then((res) => res.json())
				.then((data) => setSuggestions(data))
				.catch((err) => {
					console.error(err);
				});
		};

		fetchUsers();
	}, [searchTerm]);

	const handleSelectUser = (user) => {
		setSelectedUsers([...selectedUsers, user]);
		setSelectedUserSet(new Set([...selectedUserSet, user.email]));
		setSearchTerm("");
		setSuggestions([]);
		inputRef.current.focus();
	};

	const handleRemoveUser = (user) => {
		const updatedUsers = selectedUsers.filter(
			(selectedUser) => selectedUser.id !== user.id
		);
		setSelectedUsers(updatedUsers);

		const updatedEmails = new Set(selectedUserSet);
		updatedEmails.delete(user.email);
		setSelectedUserSet(updatedEmails);
	};

	const handleKeyDown = (e) => {
		if (
			e.key === "Backspace" &&
			e.target.value === "" &&
			selectedUsers.length > 0
		) {
			const lastUser = selectedUsers[selectedUsers.length - 1];
			handleRemoveUser(lastUser);
			setSuggestions([]);
		} else if (e.key === "ArrowDown" &&
			suggestions?.users?.length > 0) {
			e.preventDefault();
			setActiveSuggestion((prevIndex) =>
				prevIndex < suggestions.users.length - 1 ?
					prevIndex + 1 : prevIndex
			);
		} else if (e.key === "ArrowUp" &&
			suggestions?.users?.length > 0) {
			e.preventDefault();
			setActiveSuggestion((prevIndex) =>
				(prevIndex > 0 ? prevIndex - 1 : 0));
		} else if (
			e.key === "Enter" &&
			activeSuggestion >= 0 &&
			activeSuggestion < suggestions.users.length
		) {
			handleSelectUser(suggestions.users[activeSuggestion]);
		}
	};

	return (
		<div className="user-search-container">
			<div className="user-search-input">
				{/* Pills */}
				{selectedUsers.map((user) => {
					return (
						<Pill
							key={user.email}
							image={user.image}
							text={`${user.firstName} ${user.lastName}`}
							onClick={() => handleRemoveUser(user)}
						/>
					);
				})}
				{/* input feild with search suggestions */}
				<div>
					<input
						ref={inputRef}
						type="text"
						value={searchTerm}
						onChange={(e) => setSearchTerm(e.target.value)}
						placeholder="Search For a User..."
						onKeyDown={handleKeyDown}
					/>
					{/* Search Suggestions */}
					{searchTerm && (
						<ul className="suggestions-list">
							{suggestions?.users?.map((user, index) => {
								return !selectedUserSet.has(user.email) ? (
									<li
										className={index === activeSuggestion ? 
											"active" : ""}
										key={user.email}
										onClick={() => handleSelectUser(user)}
									>
										<img
											src={user.image}
											alt={`${user.firstName} 
												${user.lastName}`}
										/>
										<span>
											{user.firstName} {user.lastName}
										</span>
									</li>
								) : (
									<></>
								);
							})}
						</ul>
					)}
				</div>
			</div>
		</div>
	);
}

export default App;

// main.jsx 
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";

ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
	<App />
</React.StrictMode>
);

// Pill.jsx 
const Pill = ({ image, text, onClick }) => {
return (
	<span className="user-pill" onClick={onClick}>
	<img src={image} alt={text} />
	<span>{text} ×</span>
	</span>
);
};

export default Pill;