React UseState wont update

I have been making a react program and want to make all elements on the screen to move when the camera positions change. I am using the middle button on the mouse to do this, However when settings the cameraX and Y positions the mouseUp function isnt grabbing this new data and is still stating that it is 0 and 0.

function mouseDown(e) {
    if (e.button === 1) {
      middleClick.current = true
      cameraOffset.current = {x: e.pageX, y: e.pageY}
    }
  }

  function mouseMove(e) {
    if (!middleClick.current) return;
    console.log(cameraFixOffset.current, e.pageX, cameraOffset.current)
    setCameraX(cameraFixOffset.current.x + e.pageX - cameraOffset.current.x)
    setCameraY(cameraFixOffset.current.y + e.pageY - cameraOffset.current.y)
  }

  function mouseUp(e) {
    if (e.button !== 1) return;
    middleClick.current = false;
    cameraFixOffset.current.x = cameraX
    cameraFixOffset.current.y = cameraY
    console.log(cameraX)
  }

I expected it to update, I have used Refs and used update functions but it still doesent work.