Поиск и рендер выделенных элементов в React

Пример того, что у меня сейчас:

import React, {useState} from 'react'
import {Badge, Button} from 'react-bootstrap'
import axios from 'axios'

function Skills(props) {
  const [skills, setSkills] = useState()
  const JSONdata = [{"id":1,"name":"Первый"},{"id":2,"name":"Второй"},{"id":3,"name":"Третий"},{"id":4,"name":"Четвертый"},{"id":5,"name":"Пятый"}]

  const fetchData = async () => {
    // Тут идет запрос на сервер и получение данных JSONdata
    setSkills(JSONdata)
  }

  let selected = []

  const addToSelected = (skill) => {
    selected.push(skill.name, ' ')
  }

  return (
    <div className='sign-up-wrapper'>
      <div className='sign-up-title'>Расскажите о ваших навыках</div>

      <div>
        <button className="fetch-button" onClick={fetchData}>
          Fetch Data
        </button>
      </div>

      <input type="text"/>

      <ul className='ml-4'>{skills &&
      skills.map((skill) => {
 if(skill.name.toLowerCase().search(document.querySelector('input').value.toLowerCase())!== -1) {
          return (
            <li key={skill.id} className='skill' onClick={addToSelected(skill)}><Badge pill variant='secondary'>{skill.name}</Badge></li>
          );
        }
      })}</ul>

      <div className='sign-up-title'>Выбранные навыки</div>

      <ul className='ml-4'>{selected && selected.map((skill) => {
        return (
          <li key={skill.id} className='skill'><Badge pill variant='warning'>{skill.name}</Badge></li>
        )
      })}</ul>

    </div>
  )
}

Как должно выглядеть:

Нужно чтобы происходил динамический рендер навыков с использованием поиска. По нажатию на каждый из навыков он должен добавляться в выбранные навыки. А по нажатию на него же, но в выбранных навыках - должен от туда удаляться.

Приложил тот код, который у меня сейчас. Знаю, что там все плохо, но что вышло... Буду благодарен за любую помощь!