change styles only to map element selected by its id

I have a map created in mapbox in which I show an image in several points of the map, to each point of the map I add the same image for all, I have two mouseenter and mouseleave events, this to add styles to the image that was added when the mouse is on the image or it is not. I am trying to change the size of this image when hovering over an image, when exiting it it returns to its original size, I already achieve this with map.setLayoutProperty('places', 'icon-size', 1.1) , when I move the mouse over the image it grows 1.1, when it exits it returns to its original value: 1. but it does this with all the images of the map, how can I make it so that only the size of the image that the mouse has is changing? I already added an id to each image and I was using if to check the same id, but I can't solve it, how can I solve it?

this is the code:

    onMounted(() => {
 
       map.on('load' () => {
         map.addSource('places', GEOJSON.value)
         const imagen = new URL('../image.png', import.meta.url).href
         map.loadImage(
          imagen,
            (error, image) => {
            if (error) throw error;
    
            // Add the image to the map style.
            map.addImage('cat', image);
    
            // Add a layer showing the places.
            map.addLayer({
                'id': 'places',
                'type': 'symbol',
                'source': 'places',
                'layout': {
                  'icon-image': 'cat',
                  'icon-allow-overlap': true,
                  'icon-size': 1
                },
            });
          }
        );
       })

      map.on('mouseenter', 'places', (e) => {
         map.setLayoutProperty('places', 'icon-size', 1.1);
        console.log(e.features[0].id)
       });

      map.on('mouseleave', 'places', () => {
         map.setLayoutProperty('places', 'icon-size', 1);
       });
    
    )