How to create rectangle collision detection with mouse drag?

As you can see in the screenshot, I am trying to create collision detection of elements inside the rectangle with mouse drag. I am able to do it with the top and left side but am unable to find the solution for the right side of the element and the bottom side.

 let startX = 0
 let startY = 0
 let element = {x:100, y:100, width:200, height:200}
 let elementLeft = element.x
 let elementRight = element.x + element.width
 let elementTop = element.y
 let elementBottom = element.y+ element.height


 canvas.onmousedown = (e) => {
            const canvasData = canvasData.canvas.getBoundingClientRect();
            startX = e.clientX - canvasData.left
            startY = e.clientY - canvasData.top
 }

 canvas.onmousemove = (e) => {
            const canvasData = canvasData.canvas.getBoundingClientRect();
            let mouseX = parseInt(e.clientX - canvasData.left);
            let mouseY = parseInt(e.clientY - canvasData.top);
            let width = mouseX - startX
            let height = mouseY - startY

             ctx.save()
             ctx.strokeStyle = "#FF8A25";
             ctx.lineWidth = 2
             ctx.strokeRect(startX, startY, width, height);
             ctx.restore()

            let rectangleLeft = startX 
            let rectangleRight = startX + width 
            let rectangleTop = startY
            let rectangleBottom = startY + height

            if (elementLeft <= rectangleRight && elementRight >= rectangleLeft && elementTop <= rectangleBottom && elementBottom >= rectangleTop)) {
                        console.log("element found in rectangle")
             }
  }