title: I can't update my string value with React hooks
body: <p>Its like the simplest of cases you can think of,</p>
  <p>I have a select which updates a string according to the value which is supposed to update a property of the select itself (its background color)</p>
  <p>I am using React hooks and Styled Components to achieve this.</p>
  <p>I have Redux to be able to bind it an immutable array of colors in the future.</p>
  <p>The question is simple, why can't I update the state? I have tried to print it and it is always an empty string.</p>
  <p>Here is my styles file</p>
  <pre><code>let currentColor = '';
  
  const SelectColor = styled.div`
    select{
      background-color: ${currentColor || 'black'};
    }
    .label{
      width: 150px;
      font-size: 14px;
      text-align: left;
      margin-left: 6px;
    }
  `;
  </code></pre>
  <p>This is the component that isn't updating the selectValue for reasons I cannot grasp(I have attempted to console log it and it returns always empty string).
  I have checked the documentation a couple times and it seems like its meant to be updated this way so I am clueless...</p>
  <pre><code>const SelectComponent = ({
    disabled,
    colorList,
    label,
    onSelect,
    ...restProps
  }) =&gt; {
    const [selectValue, setSelectValue] = useState('');
  
    const handleChange = useCallback(
      (e) =&gt; {
        setSelectValue(e.target.value);
        console.log(selectValue);
      },colorList
    );
  
    return (
      &lt;SelectColor&gt;
        &lt;span className='label'&gt;{label}&lt;/span&gt;
        &lt;select onChange={e=&gt;handleChange(e)}&gt;
          {
            colorList.map(color =&gt;
            &lt;option key={color} value={color}&gt;{color}&lt;/option&gt;)
          };
        &lt;/select&gt;
      &lt;/SelectColor&gt;
    );
  };
  
  SelectComponent.propTypes = {
    disabled: PropTypes.bool,
    hourValue: PropTypes.number,
    projectName: PropTypes.string,
  };
  
  
  export default SelectComponent;
  </code></pre>