set initial scroll position to - overflow-x: scroll - element

I have an image which, when seen on a screen that doesnt fit the whole width, can be scrolled to the right to see the rest of it.

However, I would like the center of the image to be shown first, instead of the left-side of it.

Here is my react code ->

 import React, { useEffect, useRef, useState } from "react";
 import "./image_bottom.css";
 import Goblins from "../../images/image_bot_goblins.png";
 import Background from "../../images/image_bot_fondo.png";
 import Shine from "../../images/image_bot_shine.png";

 function ImageBottom() {
   const [offsetY, setOffsetY] = useState(0);
   const [parentHeight, setParentHeight] = useState(0);
   const imageRef = useRef<HTMLImageElement>(null);

   const handleScroll = () => {
     setOffsetY(window.scrollY);
     if (imageRef.current != null) {
       setParentHeight(imageRef.current.height);
     }
   };

   useEffect(() => {
     window.addEventListener("scroll", handleScroll);
     window.addEventListener("resize", handleScroll);
     return () => {
       window.removeEventListener("scroll", handleScroll);
       window.removeEventListener("resize", handleScroll);
     };
   }, []);

   const handleImageLoad = () => {
     if (imageRef.current != null) {
       setParentHeight(imageRef.current.height);
     }
   };

   return (
     <div
      id="image-bot_flex"
      className="relative flex items-center"
      style={{ left: offsetY }}
     >
    <div
      className="image-bot_section"
      style={{
      height: parentHeight,
      }}
    >
    <img
      src={Shine}
      id="shine"
      style={{ transform: `translateX(${offsetY * -0.10}px)` }}
    />
    <img
      src={Background}
      ref={imageRef}
      onLoad={handleImageLoad}
      alt=""
      id="background"
    />
    <img
      src={Goblins}
      alt=""
      id="goblins"
      style={{ transform: `translateX(${0.05 * -offsetY }px)` }}
    />
  </div>
</div>
);
}

export default ImageBottom;

and this is my css :

 .image-bot_section {
    position: relative;
    /* height: 100vh; */
    top: 0;
    left: 0;
    width: 100%;
    overflow-x: scroll;
    white-space: nowrap;
    scroll-behavior: smooth;
    animation:opacity-in 0.1s;
    background-color: black;
    /* overflow: cover; */
 }

 .image-bot_section::-webkit-scrollbar {
    display: none;
  }

  @media screen and (min-width : 0)  {
    .image-bot_section img {
    height: 80vh;
    }
  
  .image-bot_section {
    height: 80vh;
  }
 }

 @media screen and (min-width : 1000px)  {

    .image-bot_section {
        height: 100vh;
    }

    .image-bot_section img {
        height: 100vh;
    }
 }


 .image-bot_section img {
    position: absolute;
    object-position: top left;
    top: 0;
    left: 0;
    min-width: 100vw;
 }

 #image-bot_flex::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 15vh;
  background: linear-gradient(to bottom, #000000, transparent);
  z-index: 5;
 }

.image-bot_section img#shine {
  z-index: 7;
  animation: opacity-in 6s infinite;
}

.image-bot_section img#background {
  animation: opacity-breathe 4s infinite;
 }

 @keyframes opacity-in {
  0% {
    opacity: 0.1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 0.1;
  }
 }

 @keyframes opacity-breathe {
  0% {
    opacity: 0.4;
  }

  50% {
    opacity: 0.7;
  }

  100% {
    opacity: 0.4;
  }
 }

this is what shows:

scrolled-left

this is what I want to show:

scrolled-center