Review and debugging of React components

In this task, you are required to review the code and fix any issues you find at your discretion.

const ListItem = (itemProps) => {
  const { label, handleToggle } = itemProps;
  return (
    <li><input type="checkbox" onChange={handleToggle} name={label} />{label}</li>
  );
};

export default function List() {
  const [checkedItems, setCheckedItems] = useState([]);

  useEffect(() => {
    const onDblClick = () => console.log('dblclicked');
    document.addEventListener('dblclick', onDblClick);
    return () => document.removeEventListener('dblclick', onDblClick);
  }, []);

  const toggleItem = (e) => {
    const itemName = e.target.name;
    if (checkedItems.includes(itemName)) {
      setCheckedItems(checkedItems.filter(el => el !== itemName));
    } else {
      setCheckedItems([...checkedItems, itemName]);
    }
  };

  const cities = [
    { name: 'Moscow' },
    { name: 'St. Petersburg' },
    { name: 'London' },
  ];

  const carBrands = [
    { name: 'Toyota' },
    { name: 'Haval' },
    { name: 'Nissan' },
  ];

  return (
    <div>
      <ul>Visited cities: {cities.map(el => <ListItem key={el.name} handleToggle={toggleItem} label={el.name} />)}</ul>
      <ul>Desired car brands: {carBrands.map(el => <ListItem key={el.name} handleToggle={toggleItem} label={el.name} />)}</ul>
    </div>
  );
}