Hello, I'm moving a Next Image through a page. The movement happens when dragging an icon attached to the image. I'm not showing it for simplicity but the important piece of the component looks like the following:

                            ...
                            <div
                                className="absolute"
                                style={{
                                    top: `${translations[index].y}px`,
                                    left: `${translations[index].x}px`,
                                }}
                            >
                                <Image
                                    src={image.url}
                                    width={image.dimensions.width}
                                    height={image.dimensions.height}
                                    style={getImageStyle(index)}
                                    alt="Moving Image"
                                />
                                ...
                             </div>

I want to give a little pause in the movement once the image reaches symmetry conditions. For that, I'm currently trying with the following getImageStyle function:

    const getImageStyle = (index: number): CSSProperties => {
        const { width, height } = ...
        const isSymmetric = checkSymmetry(index);

        // It does not work, need to find another solution
        return {
            width: width + 'px',
            height: height + 'px',
            transition: `width ${isSymmetric ? 0.3 : 0.1}s ease, height ${isSymmetric ? 0.3 : 0.1}s ease`,
            transitionDelay: isSymmetric ? '0.3s' : '0s',
        };
    };

This idea with transition and transitionDelay is currently not working. There is no little pause when the image reaches symmetry conditions. Any idea on how to create this little pause ?