Openlayers Draw Interaction - reactjs

Question

Openlayers Draw Interaction
Above is the link to the Openlayers interaction that I'm using. I want to use this interaction to limit users to only draw a north aligned bounding box. Out of the box that's not how the Draw interaction functions. Is there a way to enforce the drawing to be that of a north aligned bounding box? Or is there a means of making the draw interaction behave as the Extent Interaction?
Openlayers Extent Interaction
I'm using the latest version of Openlayers and here is my draw interaction configuration:
const styles = [
new Style({
stroke: new Stroke({
color: '#017e01',
width: 2.25,
}),
fill: new Fill({
color: 'rgba(36, 37, 42, .25)',
}),
}),
];
const source = new VectorSource();
const vector = new VectorLayer({
projection: 'ESPG4326',
source,
style: new Style({
fill: new Fill({
color: 'rgba(36, 37, 42, .25)',
}),
stroke: new Stroke({
color: '#017e01',
width: 2,
}),
image: new Circle({
radius: 7,
fill: new Fill({
color: '#017e01',
}),
}),
}),
});
const draw = new Draw({
style: styles,
source,
condition: olEvents.shiftKeyOnly,
type: 'Polygon',
});