Ref defined in JSX div creation is not being set

I have a piano key component that can create “visuals” which are divs that float up from the keys. I have a visual_reference state included in the component’s return that also sets its ref so that I can animate it. I have this animate function inside of a useEffect that only runs after the div with the ref is defined, however the reference is always undefined.

I am pretty unexperienced with state and specifically dont understand useRef. I thought it was the same as useState except it doesnt rerender on change, and uses current value so things can access the new state.

PianoKey.js

  let curr_playback_anim = useRef([null, true])
  let [playback_visuals, set_playback_visuals] = useState([])
  let [pb_counter, set_pb_counter] = useState(0)
  let [curr_pb_anim, set_curr_pb_anim] = useState([null, true])
  let playback_visual_refs = useRef({})

  useEffect(() => {
    if (playback_visuals[pb_counter] && curr_pb_anim[1]) {
      playback_visual_refs.current[pb_counter] = playback_visuals[pb_counter].ref

      // ref should be readable here
      set_curr_pb_anim(prev_state => {
        let l = [...prev_state]
        l[0] = attribute_animation(playback_visual_refs.current[pb_counter], 'height', '100vh', '-300000px', 1000000)
        l[1] = false
        return l
      })
    }
    
  }, [playback_visuals])

useEffect(() => {
    if (pb_visual_mode === 'expand_down') {
      audio.play()
      set_playback_visuals(prev_state => {
        set_curr_pb_anim(in_prev_state => {
          let l = [...in_prev_state]
          l[1] = true
          return l
        })
        
        // ref should be set here
        return ({...prev_state,
          [pb_counter]: (
          <div key={`${pb_counter}`} ref={ref => playback_visual_refs.current[pb_counter] = ref} className='visualizer-instance'></div>
        )})
      })
    } 

return (
<div>
        {Object.keys(playback_visuals).map((key, index) => {
              return visuals[key]
            })}
      </div>
    )

I have tried changing around my usage of useRef and useState. Originally many of the defined states were refs but I just can not get them to set. I have set a useEffect with a dependency on the playback_visual_refs.current state but it never would run.