Hey good morning, i have a question with my code, in this case i am building a manage subscription button which from the main user page when you click manage it performs a POST request to the api route which generates a stripe billing portal link and returns it, and until that it works but every time i click the button it performs both a POST request and shortly after a GET request causing the page to load an error page, why does it perform also a GET request i am not understanding this thing. Thanks for the help in advance

import { useSelfUser } from '@/api/hooks';
import { profile } from '@/config/translations/profile';
import { useSession } from '@/utils/auth/hooks';
import { Box, Button, Text } from '@chakra-ui/react';
import { useRouter } from 'next/router';

export function ManageSubscriptionButton() {
  const router = useRouter();
  const user = useSelfUser();
  const session = useSession();

  const t = profile.useTranslations();

  const redirectToCustomerPortal = async () => {
    try {
        
      const { url } = await fetch('/api/stripe/create-portal-link', {
        method: 'POST',
        body: JSON.stringify({ user, session }),
        headers: {
          'Content-Type': 'application/json',
        },
      });
      console.log(url);
      router.push(url);
    } catch (error) {
      if (error) return alert((error as Error).message);
    }
  };

  return (
    <>
        <Button
          variant="solid"
          colorScheme="teal"
          disabled={!user}
          onClick={redirectToCustomerPortal}
        >
          {t.customerPortal}
        </Button>
    </>
  );
}