How do I check if one fabricjs object collides with another one?

I have the following code in my requestAnimationFrame loop:

    //move obstacles
    game.obstacles.forEach(function(obstacle, index) {
        obstacle.shape.left-=OBSTACLE_SPEED
        
        //if outside to the left of canvas remove element, 
        //splice: https://stackoverflow.com/questions/9882284/
        //index in foreach: https://stackoverflow.com/questions/10179815/
        if (obstacle.shape.left < 0-OBSTACLE_SIZE*2) {
            game.obstacles.splice(index, 1) //removes invisible obstacle
            console.log("obstacles.size: " + game.obstacles.length)
            addObstacle() //adds new obstacle
        }

        //check if player intersects with obstacle
        //console.log("intersects? " + obstacle.shape.intersectsWithObject(player.avatar))
        if (obstacle.shape.intersectsWithObject(player.avatar)) {
            console.log("YO ITS OVER!")
            alert("asdas")
        }

    })

obstacle.shape are fabricjs.Rect objects and player.avatar is a fabricjs.Circle object.

any idea why the obstacle.shape.intersectsWithObject(player.avatar) always returns false even though they are visibly clipping in the game?

player.avatar is also drawn by adjusting player.avatar.top or .left and I draw everything by calling canvas.renderAll()

    if (player.moving == true ) { //move player
        //console.log("moving")
        player.avatar.top+=player.dy
    }
    //console.log(player.avatar.top)
    canvas.renderAll()

I am basically trying to achieve the basic functionality of this game: https://www.youtube.com/watch?v=WtsMbQRViFE