Is there a method I can use so that users can't move the photo outside its own bounds ? I don't know how to explain that but you guys get the idea.

Here's the code code I'm using:

const loadImageData = async () => {
        const supabaseClient = createClient();
        const { data, error } = await supabaseClient
            .from('user_profile_images')
            .select('scale, position_x, position_y')
            .eq('user_id', userId)
            .single();

        if (data) {
            setScale(data.scale);
            setPosition({ x: data.position_x, y: data.position_y });
        }
    };

    const handleScaleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (!isPlaceholder) {
            setScale(Number(e.target.value));
        }
    };

    const handleImageMove = (e: React.MouseEvent<HTMLDivElement>) => {
        if (isDragging && !isPlaceholder && containerRef.current && imageRef.current) {
            const rect = containerRef.current.getBoundingClientRect();
            const x = e.clientX - rect.left - imageRef.current.width / 2;
            const y = e.clientY - rect.top - imageRef.current.height / 2;
            setPosition({ x, y });
        }
    };

    const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
        if (!isPlaceholder) {
            e.preventDefault();
            setIsDragging(true);
        }
    };

    const handleMouseUp = () => {
        setIsDragging(false);
    };