I work with react-rnd package to resize an object in a react app. I wonder is there a way to configure the resize operation.

This is the component I work on:

When I resize using right border, 'A' from 'VISA' becomes hidden and position of the left border stays at where it was.

When I resize from left border, I want 'V' to become hidden and position of the right border to stay where it was. Position stays as intended but 'A' becomes hidden instead. In other words, I would like to change x and width at the same time, to keep right border at same position and hide the right part of the element when resize from left border.

Is there a way to make 'V' hidden while keeping right border at the same position, something like below?

I configured the component using: https://www.npmjs.com/package/react-rnd

Configurations:

const style = {
    display: 'flex',
    position: 'relative',
    border: 'solid 1px #ddd',
    overflow: 'hidden',
};

const resizeDirections = {
    bottom: false,
    bottomLeft: false,
    bottomRight: false,
    left: true,
    right: true,
    top: false,
    topLeft: false,
    topRight: false,
}

Component:

return (
    <Rnd 
        style={style} 
        enableResizing={resizeDirections}
        children={<img id="visaImage" src={visa} alt=""></img>}
        default={{
            x:0,
            y:0,
            width: 250,
            height: 60,
        }}
    /> 
)