MediaUpload component mulfunctioning

Good day,

I am having a challenge with my custom block image gallery. i am running wordpress 6.3.2. with initial upload of images the image id is the same as the one i get from media library. but when i edit the gallery to add more images, the image ids get changed.

links to images with examples
image/ID in media library
Image/ID after uploading the image gallery to post
Image/ID after updating/ editing the image gallery to post

my code for images

	const { attributes, setAttributes } = props;
	const {
		images = [],
		captions = [],
	} = attributes;

		//Saves the new state
		setAttributes( {
			images: newImages,
		} );
	};

	const onSelectMedia = media => {
		setAttributes( {
			images: [ ...media ],
		} );
	};

	//Displays the images
	const filtered = [ ...images.reduce( ( map, obj ) => map.set( obj.id, obj ), new Map() ).values() ];

	// create image id array for uploaded images, need by MediaUpload component
	let imageIds = [];

	for ( let i = 0; i < filtered.length; i++ ) {

		let imageId = images[i]['id'];
		//Ids are returned as integer convert to string, so that MediaUpload can be able to use
		imageId = imageId.toString();
		imageIds.push( imageId );

	}

const displayImages = filtered => {
		return (
			filtered.map( ( image, index ) => {
				return (
					<li className='edit-gallery-carousel' key={ index }>
						<img
							className='carousel_image'
							width={ image.sizes.large.width }
							src={ image.sizes.large.url }
							data-id = { image.id }
							alt={ image.alt }
						/>

						
					</li>
				);
			} )
		);
	};

	const displayed_images = displayImages( filtered );
	const hasImages = !! displayed_images.length;
	if ( ! hasImages ) {
		return (
			<MediaPlaceholder
				onSelect={ onSelectMedia }
				allowedTypes={ [ 'image' ] }
				multiple={ 'add' }
				gallery={ true }
				value={ filtered }
				labels={ { title: ! hasImages && ( 'Image Carousel' ) } }
				icon ={ ! hasImages && ( 'images-alt2' ) }
				render={ ( { open } ) => (
					<Button className="select-images-button is-button is-default is-large" onClick={ event => {
						event.stopPropagation();
						open();
					} }>
						{ __( 'Media Library' ) }
					</Button>
				) }
			/> );
	}

	return (
		<figure className="edit-carousel-container">
			<ul className="edit-gallery-carousel-grid">
				{ displayed_images }
			</ul>
			<br />

			<MediaUpload
				onSelect={ onSelectMedia }
				allowedTypes={ [ 'image' ] }
				multiple={ 'add' }
				gallery={ true }
				value={ imageIds }
				render={ ( { open } ) => (
					<Button className="select-images-button is-button is-default is-large" onClick={ event => {
						event.stopPropagation();
						open();
					} }>
						{ __( 'Edit Gallery' ) }
					</Button>
				) }
			/>
		</figure>

	);