How to use cypress-image-snapshot without generating a new screenshot every test?

I want to test the responsiveness of my website in Cypress by

• Making a screenshot of the page in a narrow viewport
• Scrolling programmatically to the right
• Test whether the page still matches the screenshot The idea is that, if my responsive layout works, it is not possible to scroll to the right: all the elements should still be visible.

I use the following code (only relevant code):

When('the page is displayed on a mobile viewport', () => {
    cy.viewport(800, 750);
    cy.screenshot();
});

Then('the page should not be scrollable in a horizontal direction', () => {
    cy.window().scrollTo('right');
    cy.matchImageSnapshot();
})

And

Feature: Grid

  I want to display containers in a responsive grid.

  Scenario: Displaying the page on a small viewport
    Given I visit the URL '/grid-page'
    When the page is displayed on a mobile viewport
    Then the page should not be scrollable in a horizontal direction

The screenshot is created and saved to cypress/screenshots/grid.feature/Grid -- Displaying the page on a small viewport.png.

However, each time I run the test it generates a new, duplicate snapshot (e.g. cypress/screenshots/grid.feature/Grid -- Displaying the page on a small viewport(1).png. How do I make sure that it just uses the existing screenshot (or overwrites it with the same name), instead of creating new numbered screenshots?

I already tried using cy.screenshot('grid', {overwrite: 'true'}); and in commands.js, addMatchImageSnapshotCommand({ overwrite: true });.