Добавление и удаление элемента списка в state

Нужно, чтобы по нажатию на элемент списка, этот же элемент добавлялся в selectedSkills, а от туда рендерился уже в "Выбранных навыках". Так же чтобы по нажатию на выбранный, он убирался из selectedSkills. Проблема только в добавлении и удалении по клику на скилл.

   const [skills, setSkills] = useState('')

   useEffect(() => {
     fetchData() // Запрос данных с сервера и присваивание их через setSkills
   }, [])

   const [searchTerm, setSearchTerm] = useState('')
   const [selectedSkills, setSelectedSkills] = useState('')

      return(
       // Это строка поиска
       <div className='required-skills'>
        <div className='filter-title'>Требуемые навыки</div>
        <input
          type='text'
          placeholder='Поиск...'
          className='filter-input'
          onChange={(event) => {
            setSearchTerm(event.target.value)
          }}
        />

        // Здесь выполняется поиск
        {skills && skills.filter((value) => {
          if (searchTerm === '') {
            return value.name
          } else if (value.name.toLowerCase().includes(searchTerm.toLowerCase())) {
            return value.name
          }
        }).map((value) => {
          return (
            <li
              key={value.id}
              className='mr-2 d-inline'
              // Тут я пытался использовать onClick функцию с добавлением в state, но была ошибка множественного рендера
            ><Badge pill className='tags'>{value.name}</Badge></li>
          )
        })}
      </div>

      // Здесь идет вывод тегов, на которые нажмет пользователь
      <div className='filter-title'>Выбранные навыки</div>
      {selectedSkills && selectedSkills.map((value, index) => {
        return (
          <li key={index} className='mr-2 d-inline'><Badge pill className='yellow-tags'>{value}</Badge></li>
        )
      })}
   )