React filtering object from an array not working, better options available?

Beginner here. I'm trying to make a character builder, where you have two lists of good and bad traits you can click on and move into a list of selected traits. My overall goal is that when I click on a trait, the trait is removed from it's initial list and moved to the selected list. From there, you can click on the trait in the selected list to return it back to it's initial list in it's initial index. From the selected list, I use data from those objects and display it, for example a 'points' counter to track how many traits you can still choose.

So far I can click on a trait and move it to the selected state array, and click on it in the selected list to remove it by filter. However this way currently the trait is not removed from it's initial list, allowing it to be selected multiple times which is not what I want. And from the selected list, all it does is filter it out of the array, not return it to it's original array in it's original index which it will have to be able to do when I successfully remove it from the initial list. I'm not sure the best way to go about this. I tried to use the same function that I used to remove the object from the selected list, but it's not working and I'm not sure why.

If you'd like to see what I have so far: GH Pages Preview

And here's my code:

  // initializing selected traits as empty
  const [selectedTraits, setSelectedTraits] = useState([])

  // List of selected traits
  const selectedlist = selectedTraits.map((item) => {
    return  <div key={item.name} onClick={() => handleChosenClick(item)} className={`selected-item ${item.value > 0 ? 'red' : 'green'}`}>
    <div className="selected-item-icon"><img src={item.icon} alt="" /></div>
    <div className="selected-item-name">{item.name}</div>
    <div className="selected-item-points">{`${item.value > 0 ? "+" : ""}`}{item.value}</div>
  </div>
  })

 // Mapping over three data sheets for the traits values/names/etc.
  const jobs = occupationsData.map((item) => {
    return <Occupation key={item.name}{...item} onClick={() => handleJobChange(item)} className={`occupation-item ${active == item && 'highlight'}` }/>;
  });

  const [goodtraits, setGoodTraits] = useState(goodtraitsData.map((item) => {
    return <Goodtrait key={item.name} {...item} onClick={() => handleTraitClickGood(item)} />;
  }));

  const [badtraits, setBadTraits] = useState(badtraitsData.map((item) => {
    return <Badtrait key={item.name} {...item} onClick={() => handleTraitClickBad(item)} />;
  }));

  //This you can ignore, for job selection which is working as intended.
  const handleJobChange = (item) => {
    setStartValue(item.value)
    setActive(item)
  }


  //function that moves whatever object is clicked into the selected traits
  const handleTraitClickGood = (item) => {
    setSelectedTraits(prevState => [...prevState, item ] )

    // This function isn't working as intended, not removing.
    setGoodTraits(prevTraits => {
      return prevTraits.filter(prev => prev !== item)
    })
  }
  const handleTraitClickBad = (item) => {
    setSelectedTraits(prevState => [...prevState, item ] )
  }



  //Function that removes an object on click in the selected list
  const handleChosenClick = (item) => {
    setSelectedTraits(prevTraits => {
      return prevTraits.filter(prev => prev !== item)
    })
  }

If this doesn't show enough, I apologize and here's a link to the GH repo just in case but hopefully you don't have to view this: GH Repo

I tried using the same exact function that removes an object from the selected list:

  const handleChosenClick = (item) => {
    setSelectedTraits(prevTraits => {
      return prevTraits.filter(prev => prev !== item)
    })
  }

In my function that moves the object to the selected list like this:

  const handleTraitClickGood = (item) => {
    setSelectedTraits(prevState => [...prevState, item ] )
    setGoodTraits(prevTraits => {
      return prevTraits.filter(prev => prev !== item)
    })
  }

However that doesn't work. Any reason why this isn't working or are there just better options to meet my goal? Feeling a little overwhelmed by this one as I'm pretty new. Eventually I want to try to make it that some traits are mutually exclusive, for example cannot take 'speed demon' if you have 'sunday driver' or vice versa. That issue is for another day though. Thank you!

Via Active questions tagged javascript - Stack Overflow https://ift.tt/QJ9sf2u