We have observed some unexpected behavior with the React Spreadsheet component lately.

We are attempting to add signatures to the worksheet at the currently selected cell. We understand that this can be done by adding the image (which we gather from another component, and convert to data uri) to the shapes collection in the worksheet using the selected cell for the position.

The problem we are expericing is that adding more than one image to the worksheet inconsistently adds the new image. Some times it will insert as expected, other times it will place an image that is already defined at another location. It does does in a consistent, but odd stack like behavior.

For instance, if I add image A to B1, and try to add image C to D2, D2 may show image A instead of image C, additionally, deleting image A from B1 may then correctly show image C at D2. While other times, inserting a image elsewhere may work as expected. It is very odd.

I've included some sample code that we are using.

const insertSignature = () => {
if (!spreadsheet?.current) {
return;
}
// get our image as data, since worksheet image require a datastring
const d = signature.current?.toDataURL();

const wi = new WorksheetImage(d);
const s = spreadsheet.current;
const c1 = s.activeWorksheet.getCell(
`R${s.activeCell.row + 1}C${s.activeCell.column + 1}`,
CellReferenceMode.R1C1
);
const c2 = s.activeWorksheet.getCell(
`R${s.activeCell.row + 2}C${s.activeCell.column + 2}`,
CellReferenceMode.R1C1
);
wi.topLeftCornerCell = c1;
wi.bottomRightCornerCell = c2;

// need to find the shape at the current location, if it exists, to clear it out
const shapes = s.activeWorksheet.shapes();
for (let i = 0; i < shapes.count; i++) {
const shape = shapes.item(i);
if (
shape.topLeftCornerCell.equals(c1) &&
shape.bottomRightCornerCell.equals(c2)
) {
shapes.remove(shape);
break;
}
}

shapes.add(wi);
};