useMutation does not work from react front end but works in apollo client with same variables Mutation.js

I am trying to executate a mutation called createGroup, when i do it graphQl apolo clients it creates the group in firebase collection successfully but in the react frontend it does not work. When the create button is clicked in the appolo dev tools it shows as mutation started but nothing happens on firebase.

My mutation.js from react-frontend

import { gql } from "@apollo/client";

export const CREATE_GROUP = gql `
mutation CreateGroup(
  $name: String!,
  $description: String!,
  $leaders: [String]!,
  $members: [String]!,
  $notes: [NoteInput]!
) {
  createGroup(
    name: $name,
    description: $description,
    leaders: $leaders,
    members: $members,
    notes: $notes
  ) {
    id
    name
    description
    leaders {
      id
      name
    }
    members {
      id
      name
    }
    notes {
      id
      content
      createdBy {
        id
        name  
      }
      createdAt
    }
  }
}
`;

createGroup function

import React, { useState } from "react";
import { useMutation } from "@apollo/client";
import { CREATE_GROUP } from "../../GraphQL/Mutations"; 



const CreateGroup = () => {
  const [selectedLeaders, setSelectedLeaders] = useState([]);
  const [selectedMembers, setSelectedMembers] = useState([]);
  const [groupName, setGroupName] = useState("");
  const [groupDescription, setGroupDescription] = useState("");
  const [submitted, setSubmitted] = useState(false);


  const [availableLeaders, setAvailableLeaders] = useState(dataLeaders);
  const [availableMembers, setAvailableMembers] = useState(dataMembers);


  
  const [createGroup, {error}] = useMutation(CREATE_GROUP);

  const handleSubmit = async (e) => {
    e.preventDefault()
    console.log("just cliked me from submit")

      await createGroup({
        variables: {
          name: groupName,
          description: groupDescription,
          leaders: selectedLeaders,
          members: selectedMembers,
        },
      });
      if(error){
        console.log(error)
      }

      setSubmitted(true);
  };

Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
const client = new ApolloClient({
  uri: process.env.REACT_APP_APOLLO_SERVER_URL,
  cache: new InMemoryCache(),
});
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <ApolloProvider client={client}>
  <App />
  </ApolloProvider>
   
  </BrowserRouter>
);

reportWebVitals();

I tried inspecting it with apolo dev tools and i could see that the mutation starts and i have also tried running the mutation in apollo dev tools but it keeps spining forever without returning anything