ReactJS best way to animate image zoomin/out from grid item to screen width

I just started learning React and i’m making a clone of the website surviveicarus as my 1st ever React project to learn the basic stuff. I think the website looks complicated enough for me to learn enough about how React works and maybe learn some more CSS.
I struggle figuring out how to animate zooming in an image from a grid item to full screen width without messing with the grid. Should i make another element and pass the image property to it and show it on the screen or can it be done with the current div element holding the image.

Gallery container:

import React, { useState } from 'react'
import { BsArrowsAngleExpand } from 'react-icons/bs';

import Image1 from "../../images/gallery/Gallery_Wolves.jpg";
import Image2 from "../../images/gallery/Gallery_Orbit.jpg";
import Image3 from "../../images/gallery/Gallery_Lightning.jpg";
import Image4 from "../../images/gallery/Gallery_Hunting.jpg";
import Image5 from "../../images/gallery/Gallery_Building.jpg";
import Image6 from "../../images/gallery/Gallery_Desert.jpg";

import { GalleryContainer, ImageHolder, GalleryImage } from './GalleryElements'

function GallerySection() {
    const [ imageOpen, setImageOpen ] = useState(false);
    const toggleImage = () => { setImageOpen(!imageOpen); console.log(imageOpen) }

    return (
        <GalleryContainer>
            <ImageHolder onClick={toggleImage} imageOpen={imageOpen}>
                <GalleryImage src={Image1} alt="Wolves"/>
                <BsArrowsAngleExpand/>
            </ImageHolder>
            <ImageHolder>
                <GalleryImage src={Image2} alt="Orbit"/>
                <BsArrowsAngleExpand/>
            </ImageHolder>
            <ImageHolder>
                <GalleryImage src={Image3} alt="Lightning"/>
                <BsArrowsAngleExpand/>
            </ImageHolder>
            <ImageHolder>
                <GalleryImage src={Image4} alt="Hunting"/>
                <BsArrowsAngleExpand/>
            </ImageHolder>
            <ImageHolder>
                <GalleryImage src={Image5} alt="Building"/>
                <BsArrowsAngleExpand/>
            </ImageHolder>
            <ImageHolder>
                <GalleryImage src={Image6} alt="Desert"/>
                <BsArrowsAngleExpand/>
            </ImageHolder>
        </GalleryContainer>
    )
}

export default GallerySection

Elements style:

import styled from 'styled-components';

export const GalleryContainer = styled.div`
    display: grid;
    gap: 0px;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    
    @media screen and (max-width: 982px) {
        grid-template-columns: 1fr 1fr;
    }
`

export const ImageHolder = styled.div`
    display: flex;
    width: 100%;
    position: relative;
    top: 0;
    border: 1px solid #e0bf26;
    cursor: pointer;
    transition: all 300ms;

    ::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        transition: background 300ms;
    }

    & svg {
        content: '';
        position: absolute;
        color: #e0bf26;
        font-size: 1.6em;
        top: 50%;
        left: 50%;
        transform: translate(-50%, 50%);
        opacity: 0;
        transition: all 300ms;
    }

    :hover {
        ::before {
            background: #0008;
        }
        & svg {
            opacity: 1;
            transform: translate(-50%, -50%);
        }
    }
`

export const GalleryImage = styled.img`
    width: 100%;
`