Increment State Count in Mapping Function : Goal is to increment the count in the mapping function while keeping track of the new value in state. "charlie" isn't updating, even on re-renders of the component, and subsequent runs of mapData. Meanwhile, every re-render/run of mapData continues to print the updated count outside "charlie".
My code looks roughly like this:

    const [data, setData] = useState([])
    const [count, setCount] = useState(0)
    
    const mapData = (apiData) => {
      const dataMapped = apiData.map((pic, index) => {
        return (
          setCount(prevState => (prevState+1))
          <div className="charlie">{count}</div> 
        )
      })
      setData(prevState => ([...prevState, ...dataMapped]))
    }
    
    return {
      <div>
        <div>{count}</div> {/* shows updated count every render */}
        <div>{data}</div>  {/* shows 0 every render*/}
      </div>
    }




