I feel like it has something to do with rerendering but im not 100% sure
This component is in a main page.tsx component

"use client"
import React, {useEffect} from 'react';
import {Label} from "@/components/ui/label";
import {useRouter} from "next/navigation";

interface BlendProps {
    id: number
}

const Blend = React.memo(({ id }: BlendProps) => {
    const [blendId, setBlendId] = React.useState<number>(0)
    const [userId, setUserId] = React.useState<number>(0)
    const [blend, setBlend] = React.useState<string>('')
    const router = useRouter();
    useEffect(() => {
        // Check if user is logged in
        const data = {
            user_id: localStorage.getItem('userId')
        };

        fetch('http://localhost:5000/check-login', {
            method: 'POST',
            credentials: 'include',
            body: JSON.stringify(data),
            headers: { 'Content-Type': 'application/json' }
        })
            .then(res => {
                if (res.status !== 200) {
                    router.push('/');
                } else {
                    // If logged in, fetch the blend data
                    fetch(`http://localhost:5000/blend/${id}`, { method: 'GET', credentials: 'include' })
                        .then(res => {
                            if (res && res.ok) {
                                return res.json();
                            } else {
                                throw new Error("Failed to fetch blend data");
                            }
                        })
                        .then(data => {
                            setBlend(data.blended_list);
                        })
                        .catch(error => {
                            console.error("Error:", error);
                        });
                }
            })
    }, []);
    return (
        <>
            <Label>{blend}</Label>
        </>

    );
});

export default Blend;