Remix shopify app , in action can i do a fetch api request and get the response and from that response , i create a server side graphql mutation

So i’m new to shopify dev app , and i just installed a project in which i’m learning how to use the Remix framework .

let me explain to you what i’m trying to achieve :
1 – i’m creating a shopify app , in which when a person has a shopify store and download my application , he fills a form with his informations (name,email,password)
2-When submitting the form , it triggers an API call (account creation) into another application named TikTak
3-I receive the api response which contains the webhooks URLS (products,orders…) and i create the user’s webhook in his store
4-So when the user uses Tiktak , whenever he receives an order or create/modify his products , they’ll be sotred in Tiktak

this is my code snippet of register-company.jsx :

export async function registerCompany(payload) {
    console.log("here")
    const response = await fetch("https://ngrok-----/api/v1/company-install-shopify/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(payload),
    });
  
    return await response.json();
  } 


export const loader = async ({ request }) => {
    const { session } = await authenticate.admin(request);
    
    // Store session in context
    return {
      session
  
    };
  };


export const action = async ({ request  }) => {
   const { admin } = await authenticate.admin(request);

    // GET SESSION
    // const { admin } = await authenticate.admin(request);

    // GETTING VARS FROM FORM
    const body = await request.formData();
    const formData = Object.fromEntries(body.entries());

    const user = {
      first_name: formData.first_name,
      last_name: formData.last_name,
      password: formData.password,
    };

    const company = {
      email: formData.email,
      slug: formData.slug,
      phone: formData.phone,
      country: "TN",
      store_name: formData.shop, 
    };
    const session = {
        shop :formData.shop,
        accessToken:formData.accessToken
    }
    const shopData = {
      limitedStock: true,
      hasSocialMedia: true,
      customProducts: false,
      noDelivery: false,
    };

    // PAYLOAD TO SEND IN REGISTER COMPANY
    const payload = { company, user, shopData , session};

    // REGISTER COMPANY IN TIKTAK
    let company_response = await registerCompany(payload);  
    console.log('Company Response:', company_response);


    const productWebhookUrl = company_response['product_webhook'];

    const graphqlResponse = await admin.graphql(
          `mutation webhookSubscriptionCreate($topic: WebhookSubscriptionTopic!, $webhookSubscription: WebhookSubscriptionInput!) {
          webhookSubscriptionCreate(topic: $topic, webhookSubscription: $webhookSubscription) {
              webhookSubscription {
              id
              topic
              endpoint {
                  __typename
                  ... on WebhookHttpEndpoint {
                  callbackUrl
                  }
              } 
              }
              userErrors {
              field
              message
              }
          }
          }`,
          {
          variables: {
              topic: "PRODUCTS_CREATE",
              webhookSubscription: {
              callbackUrl: productWebhookUrl,
              format: "JSON",
              }
          }
          }
      );
      console.log('GraphQL Response:', graphqlResponse);

    // CREATE PRODUCTS WEBHOOK
    // if (company_response){
    // await createWebhookProductsCreation(request,company_response['product_webhook']); 
    // await createWebhookProductsUpdate(request,company_response['product_webhook']);    

    // // CREATE ORDERS WEBHOOK
    // await createWebhookOrdersCreation(request,company_response['orders_webhook']);  
    // await createWebhookOrdersUpdate(request,company_response['orders_webhook']);  
        // }
    return company_response
 
}

export default function RegisterCompany() {


    return (
      <div>
        <Form method="POST">
  
        <input value={session.shop} name='shop' type='hidden'/>
        <input value={session.accessToken} name='accessToken' type='hidden'/>
        <input  value={session.shop.replace(".myshopify.com",'')} readOnly name="slug"/>
        <input  value={session.shop.replace(".myshopify.com",'')} readOnly name="shop"/>

        {/* User Inputs */}
        <input
        name="first_name"
          placeholder="First Name"
        />
        <input
          name="last_name"
          placeholder="Last Name"
        />
        <input
          type="password"
          name="password"
          placeholder="Password"
        />
  
        {/* Company Inputs */}
        <input
          name="email"
          placeholder="Email"
        />
        <input
          name="phone"
          placeholder="Phone"
        />
          <button >Create Account</button>
  
        </Form>
      </div>
    );
  }

The company creation API works fine as i see in Tiktak and i receive the response , but the grapql mutation isn’t working nor applying (it’s like i can only execute 1 action)

i’m trying to get the reponse from the api and executes a graphql mutation using that response in Remix Action hook