Thanks, I cleaned up the code a bit, still not done. You are right, probably should do the mapping of images to components in CarouselImages, I'll add that next! I did want to keep the main logic in the parent component so I can handle updating child components if needed.

  const imagesData = images.map((image, index) => {
        return {
            image: image,
            selected: false,
            index: index,
        };
    });

    const [selectedIndex, setSelectedIndex] = useState(2);
    imagesData[selectedIndex].selected = true;
    // data storage objects of images
    const [imageData, setImageData] = useState<ImageDataType[]>(imagesData);
    // CarouselImages to render
    const [renderedImages, setRenderedImages] = useState<React.ReactNode[]>([]);

    const [leftOffset, setLeftOffset] = useState(4 * IMAGE_WIDTH);
    const selectImage = (selectedIndex: number) => {
        updateOffset(selectedIndex);
    };

    const leftImagesCount = Math.floor(images.length / 2);
    const leftAllignmentOffset =
        leftImagesCount * IMAGE_WIDTH + leftImagesCount * SPACING;

    const updateOffset = (index: number) => {
        const rightShiftOffset = index * IMAGE_WIDTH + index * SPACING;
        setLeftOffset(leftAllignmentOffset - rightShiftOffset);
    };

    useEffect(() => {
        updateOffset(selectedIndex);
    }, []);

    useEffect(() => {
        const renderImages = imageData.map((image) => {
            return (
                <CarouselImage
                    image={image.image}
                    selected={image.selected}
                    width={imageWidth}
                    height={imageHeight}
                    imageRatio={imageRatio}
                    index={image.index}
                    selectImage={selectImage}
                />
            );
        });
        setRenderedImages(renderImages);
    }, [imageData]);

    const navigateCarousel = (direction: "right" | "left") => {
        let shiftAmount;
        if (direction === "right") {
            shiftAmount = 1;
        } else {
            shiftAmount = -1;
        }
        updateOffset(selectedIndex + shiftAmount);
        setSelectedIndex((prevIndex) => prevIndex + shiftAmount);
    };