using a react hook that depends on ref being not null

Question

I am trying to pass an observable into react-jss to change the styles as the observable emits new values. This works out of the box like so:

function randomColor() { ... } // generates a random color

const App = () => {
  const source = timer(0, 1000).pipe(map(randomColor));
  const useStyles = createUseStyles({bg: {background: source}});
  const classes = useStyles();
  return (<div className={classes.bg}>test</div>);
}

The problem comes when I want to use an observable from a native mouse event, in my case I'm replicating a drag and drop functionality. In that case my component looks like this

function createDraggable(el) { ... } // => Observable<{x: number, y: number}>
const App = () => {
  const div = useRef(null);
  const useStyles = createUseStyles({
    div: { 
      left: createDraggable(div).map(coords => coords.x ), 
      top: createDraggable(div).map(coords => coords.y) 
    }
  })
  useStyles(); // error null is not an HTMLElement
  return(...) 
}

To ensure that the ref is not null I need to call createDraggable inside of useEffect but then I can't use useStyles. I've only come up with one potential solution, which is to ditch native dom events and use a Subject in conjuction with synthetic events to replicate the behavior without refs. I don't know if that's the best way though. Seems like a lot of re-inventing the wheel to me.