React Redux toolkit

I want to empty state variable ( data: contactCard) after successfull response that are provided by useCreateContactCardMutation(); i am using reduxtoolkit How i can achive this contactCard?.mutate(null) and contactCardUpdate?.mutate(null) through error mutation is not a function

import React, { useEffect, useRef, useState } from "react";
import ContentLayout from "../../Layouts/Views/ContentLayout";
import {
    useCreateContactCardMutation,
    useGetUserWithSocialMediaQuery,
    useUpdateContactCardMutation,
} from "../../app/services/CompleteProfileService";
import { Modal, Spin, notification } from "antd";
import ShowContactCard from "../UserDetailComponents/ShowContactCard";
import { useFormik } from "formik";
import Label from "../Inputs/forms/Label";
import TransparentInput, { TextArea } from "../Inputs/forms/TransparentInput";
import { contactCardSchema } from "../../schemas/CategoriesSchema";
import { useDispatch, useSelector } from "react-redux";
import ErrorsMessage from "../Inputs/ErrorsMessage";
import { handleOpenModal } from "../../redux/slice/CompleteProfileSlice";
import { ERROR, SUCCESS } from "../../Utils/Constants";
import NoRecord from "../../Pages/Errors/NoRecord";
const initialValues = {
    id: "",
    name: "",
    phone: "",
    company: "",
    email: "",
    primary_address: "",
    former_address: "",
    city: "",
    country: "",
};
function ContactCard() {
    const btnRef = useRef(null);
    const dispatch = useDispatch();
    const modal = useSelector(
        (state) => state.completeUpdateProfile.isModalOpen
    );
    const { data, isLoading, error, refetch } =
        useGetUserWithSocialMediaQuery();

    const [
        createContactCard,
        {
            data: contactCard,
            isLoading: loadingContact,
            error: isError,
            mutate,
        },
    ] = useCreateContactCardMutation();

    const [
        updateContactCard,
        {
            data: contactCardUpdate,
            isLoading: loadingContactUpdate,
            mutate: mutateUpdateContactCard,
        },
    ] = useUpdateContactCardMutation();
    useEffect(() => {
        if (loadingContact || loadingContactUpdate) {
            btnRef.current?.setAttribute("data-kt-indicator", "on");
            btnRef.current.disabled = true;
        } else if (btnRef.current) {
            btnRef.current?.setAttribute("data-kt-indicator", "off");
            btnRef.current.disabled = false;
        }
        if (contactCard || contactCardUpdate) {
            if (
                contactCard?.status === SUCCESS ||
                contactCardUpdate?.status === SUCCESS
            ) {
                notification.success({
                    message: "Success",
                    description:
                        contactCard?.message || contactCardUpdate?.message,
                });

                dispatch(handleOpenModal(false));
            } else if (contactCard?.status === ERROR) {
                notification.error({
                    message: "Failed",
                    description:
                        contactCard?.message || contactCardUpdate?.message,
                });
            }
        }
        contactCard?.mutate(null);
        contactCardUpdate?.mutate(null);
        refetch();
    }, [
        loadingContact,
        loadingContactUpdate,
        btnRef.current,
        contactCard,
        contactCardUpdate,
    ]);
    const { values, setValues, errors, touched, handleSubmit, handleChange } =
        useFormik({
            initialValues: initialValues,
            validationSchema: contactCardSchema,
            onSubmit: async (values, action) => {
                console.log(values);
                (await values.id)
                    ? updateContactCard(values)
                    : createContactCard(values);
                // action.resetForm();
            },
        });

    if (isLoading) {
        return <Spin spinning={true} fullscreen />;
    }
    const showModal = () => {
        dispatch(handleOpenModal(true));
    };

    const handleCancel = () => {
        dispatch(handleOpenModal(false));
    };

    return (
        <>
            <Modal
                title="Contact card"
                open={modal}
                // width={750}
                onCancel={handleCancel}
                footer={null}
            >
                <form onSubmit={handleSubmit}>
                    <div className="row pt-5">
                        <div className="col-md-6 mb-4">
                            <Label name="Full name" className="required" />
                            <TransparentInput
                                name="name"
                                onChange={handleChange}
                                placeholder="Enter your full name"
                                value={values.name}
                                className="form-control-solid"
                            />
                            {errors.name && touched.name ? (
                                <ErrorsMessage message={errors.name} />
                            ) : null}
                        </div>
                        <div className="col-md-6 mb-4">
                            <Label name="Email" className="required" />
                            <TransparentInput
                                type="email"
                                name="email"
                                onChange={handleChange}
                                placeholder="Enter your email address"
                                value={values.email}
                                className="form-control-solid"
                            />
                            {errors.email && touched.email ? (
                                <ErrorsMessage message={errors.email} />
                            ) : null}
                        </div>
                        <div className="col-md-6 mb-4">
                            <Label name="Phone" className="required" />
                            <TransparentInput
                                type="tel"
                                name="phone"
                                onChange={handleChange}
                                placeholder="Enter your phone number"
                                value={values.phone}
                                className="form-control-solid"
                            />
                            {errors.phone && touched.phone ? (
                                <ErrorsMessage message={errors.phone} />
                            ) : null}
                        </div>
                        <div className="col-md-6 mb-4">
                            <Label name="Company" className="required" />
                            <TransparentInput
                                name="company"
                                onChange={handleChange}
                                placeholder="Enter your company name"
                                value={values.company}
                                className="form-control-solid"
                            />
                            {errors.phone && touched.phone ? (
                                <ErrorsMessage message={errors.phone} />
                            ) : null}
                        </div>

                        <div className="col-md-6 mb-4">
                            <Label name="Country" className="required" />
                            <TransparentInput
                                name="country"
                                onChange={handleChange}
                                placeholder="Enter city name"
                                value={values.country}
                                className="form-control-solid"
                            />
                            {errors.country && touched.country ? (
                                <ErrorsMessage message={errors.country} />
                            ) : null}
                        </div>
                        <div className="col-md-6 mb-4">
                            <Label name="City" className="required" />
                            <TransparentInput
                                name="city"
                                onChange={handleChange}
                                placeholder="Enter city name"
                                value={values.city}
                                className="form-control-solid"
                            />
                            {errors.city && touched.city ? (
                                <ErrorsMessage message={errors.city} />
                            ) : null}
                        </div>
                        <div className="col-md-12 mb-4">
                            <Label name="Address" className="required" />
                            <TextArea
                                name="primary_address"
                                onChange={handleChange}
                                placeholder="Enter address"
                                value={values.primary_address}
                                className="form-control-solid"
                            />
                            {errors.primary_address &&
                            touched.primary_address ? (
                                <ErrorsMessage
                                    message={errors.primary_address}
                                />
                            ) : null}
                        </div>
                        <div className="col-md-12 mb-4">
                            <Label name="Former address (optional)" />
                            <TextArea
                                name="former_address"
                                onChange={handleChange}
                                placeholder="Enter former address"
                                value={values.former_address}
                                className="form-control-solid"
                            />
                        </div>
                        <div className="col-lg-12">
                            <div className="d-flex justify-content-end pt-5 gap-1">
                                <button
                                    type="submit"
                                    id="bioInformationBtn"
                                    className="btn btn-primary"
                                    ref={btnRef}
                                >
                                    <span className="indicator-label">
                                        Save
                                    </span>

                                    <span className="indicator-progress">
                                        Please wait...
                                        <span className="spinner-border spinner-border-sm align-middle ms-2"></span>
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </Modal>
            <ContentLayout
                buttonName="Create contact card"
                showBtn={data?.data?.user_contact_card === null ? true : false}
                // showBtn={true}
                onClick={showModal}
            >
                <div className="col-md-12 col-xl-12 col-xxl-12">
                    {data?.data?.user_contact_card ? (
                        <ShowContactCard
                            data={data}
                            setFormValues={setValues}
                        />
                    ) : (
                        <NoRecord />
                    )}
                </div>
            </ContentLayout>
        </>
    );
}

export default ContactCard;