JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="500" height="500" style="border: 1px solid red;"></canvas>

JavaScript

var canvas = new fabric.Canvas('canvas');

        var rect = new fabric.Rect({
            top : 100,
            left : 100,
            width : 60,
            height : 70,
            fill : 'red'
        });

        canvas.add(rect);

        canvas.on('mouse:down', function (option) {
            console.log(option);
            if (typeof option.target != "undefined") {
                return;
            } else {
                var startY = option.e.offsetY,
                    startX = option.e.offsetX;

                console.log(startX, startY);

                var rect2 = new fabric.Rect({
                    top : startY,
                    left : startX,
                    width : 0,
                    height : 0,
                    fill : 'transparent',
                    stroke: 'red',
                    strokewidth: 4
                });

                canvas.add(rect2);

                console.log("added");
                canvas.on('mouse:move', function (option) {
                    var e = option.e;
                    rect2.set('width', e.offsetX - startX);
                    rect2.set('height', e.offsetY - startY);
                });


            }
        });

        canvas.on('mouse:up', function () {
            canvas.off('mouse:move');
        });