when object is flipped horizontally control corners are misplaced in FabricJS - fabricjs

Question

hey so we have a custom fabric canvas and when the user flips the object to set flipX to true, the control corner MTR or the border for MTR is misplaced.
before
after
the object is flipped by scaling. I've tried to manually set flipX to false when object was scaled and that seemed to fix it, but it caused the object to not be flipped.
here is all the code in our codebase related to control corners, I believe we're not changing or setting anything to cause such a break, but I'm not sure what's causing it either.
import { FabricObject, ProductConfig } from "../../../../types"
import { isText } from "./general"
const applyDefaultCosmeticAttributes = (
obj: FabricObject,
productConfig?: ProductConfig
) => {
obj.set({
borderColor: "#FFEE0B",
editingBorderColor: "#FFEE0B",
cornerColor: "#000000",
cornerSize: 8,
borderScaleFactor: 2,
transparentCorners: false,
hoverCursor: "pointer",
snapAngle: 5,
})
if (productConfig) {
if (
productConfig.rotatable !== undefined &&
productConfig.rotatable !== null
) {
obj.setControlVisible("mtr", productConfig.rotatable)
}
if (
productConfig.scalable !== undefined &&
productConfig.scalable !== null
) {
obj.setControlsVisibility({
bl: productConfig.scalable,
br: productConfig.scalable,
mb: productConfig.scalable,
ml: productConfig.scalable,
mr: productConfig.scalable,
mt: productConfig.scalable,
tl: productConfig.scalable,
tr: productConfig.scalable,
})
}
}
if (obj.width === 0 && obj.height === 0) {
obj.setControlsVisibility({
bl: false,
br: false,
mb: false,
ml: false,
mr: false,
mt: false,
tl: false,
tr: false,
mtr: false,
})
}
obj.on("mouseover", function (this: FabricObject) {
const activeObject = this.canvas.getActiveObject()
if (activeObject) if (activeObject.key === obj.key) return
this._renderControls(this.canvas.contextTop, {
borderColor: "#FFEE0B",
hasRotatingPoint: false,
hasControls: false,
})
})
obj.on("mousedown", function (this: FabricObject) {
this.canvas.clearContext(this.canvas.contextTop)
})
obj.on("mouseout", function (this: FabricObject) {
this.canvas.clearContext(this.canvas.contextTop)
})
}
export default applyDefaultCosmeticAttributes