ربط الواجهة الامامية مع backend

اريد تعلم jsx قمت ببعض الخطوات والان لدي مشكلة عدم استجابة عند ارسال الطلب في الواجهة الامامية

import CommonForm from "@/components/common/form";
import { registerForm } from "@/config";
import { registerUser } from "@/srore/auth-slice";
import { useState } from "react";
import { useDispatch } from "react-redux";
import { Link, useNavigate } from "react-router-dom";


const initialState = {
    name: "",
    email: "",
    password: "",
  };

function AuthRegister() {
    const [formData, setFormData] = useState(initialState);
    const Navigate = useNavigate()


    const dispatch = useDispatch()

    function onSubmit(event){
      event.preventDefault()
      dispatch(registerUser(formData)).then(() => Navigate("/auth/login"));
    }
    

    return (  
        <div className="mx-auto w-full max-w-md space-y-6">
      <div className="text-center">
        <h1 className="text-3xl font-bold tracking-tight text-foreground">
          Create new account
        </h1>
        <p className="mt-2">
        Already have an account
        <Link className="font-medium ml-2 text-primary hover:underline" to="/auth/login">
        Login
        </Link>
        </p>
        </div>
        <CommonForm 
        formControls={registerForm}
        buttonText={"Sign Up"}
        formData={formData}
        setFormData={setFormData}
        onSubmit={onSubmit}
       
        />
        </div>
    );
}

export default AuthRegister;

import {createAsyncThunk, createSlice} from "@reduxjs/toolkit";
import axios from "axios";


    //معلومات المستخدم
    const initialState = {
        isAuthenticated: false,
        isLoading: true,
        user: null,
      };
      
      export const registerUser = createAsyncThunk(
        "/register",
      
        async (formData) => {
          const response = await axios.post(
            "http://localhost:3000/register",
            formData,
            {
              withCredentials: true,
            }
          );
      
          return response.data;
        }
      );




const authSlice = createSlice({
    name:"auth",
    initialState,
    reducers: {
        setUser: (state, action) => {},
        
      },
      extraReducers:(builder) =>{
        builder
      .addCase(registerUser.pending, (state) => {
        state.isLoading = true;
      })
      .addCase(registerUser.fulfilled, (state, action) => {
        state.isLoading = false;
        state.user = null;
        state.isAuthenticated = false;
      })
      .addCase(registerUser.rejected, (state, action) => {
        state.isLoading = false;
        state.user = null;
        state.isAuthenticated = false;
      })
      }
})
export const { setUser } = authSlice.actions;
export default authSlice.reducer;

frontendjsx.zip backend.zip