title: How to use a function within useState
body: <p>I'm using React Sortable HOC to move items around. My initial state is an empty array and I need to update the state with a function from React Sortable. </p>
  
  <p>This is the original snippet from React Sortable HOC </p>
  
  <pre><code>onSortEnd = ({oldIndex, newIndex}) =&gt; {
      this.setState(({items}) =&gt; ({
        items: arrayMove(items, oldIndex, newIndex),
      }));
    };
  </code></pre>
  
  <p>My state and function look like this</p>
  
  <pre><code>const [colors, setColors] = useState([])
  
  function onSortEnd({ oldIndex, newIndex }) {
    setColors([...colors, ({ colors }) =&gt; ({
       colors: arrayMove(colors, oldIndex, newIndex)
    })]);
  };
  
  </code></pre>
  
  <p>What ends up happening is no errors, but more colors get added when I attempt to arrange any existing color.</p>