Django Next.js handling responses when signing up

Question

I am building my first Django + Next.js app and I want to display an alert when the user sign up if the username or the email already exists.

Currently, if the user chooses an username/email that already exists there is a 400 error (what I want), otherwise everything is working fine. When I try it on postman, I get the explicit problem (username already exists or email already exists). But I didn't manage to achieve that on my frontend, even in the console, I don't see any message.

RegisterView :

class RegisterView(APIView):
permission_classes = (permissions.AllowAny, )

def post(self, request):
    try:
        data = request.data
        email = data['email']
        username = data['username']
        password = data['password']
        re_password = data['re_password']

        if password == re_password:
            if len(password) >= 8:
                if not User.objects.filter(username=username).exists():
                    if not User.objects.filter(email=email).exists():
                        user = User.objects.create_user(
                            email=email,
                            username=username,
                            password=password,
                        )

                        user.save()

                        if User.objects.filter(username=username).exists():
                            return Response(
                                {'message': 'Account created successfully'},
                                status=status.HTTP_201_CREATED)
                            
                        else:
                            return Response(
                                {'message': 'Something went wrong when trying to create account'},
                                status=status.HTTP_500_INTERNAL_SERVER_ERROR)
                    else:
                        return Response(
                            {'message': 'Account with this email already exists'},
                            status=status.HTTP_400_BAD_REQUEST,)       
                else:
                    return Response(
                        {'message': 'Username already exists'},
                        status=status.HTTP_400_BAD_REQUEST)
            else:
                return Response(
                    {'message': 'Password must be at least 8 characters in length'},
                    status=status.HTTP_400_BAD_REQUEST)
        else:
            return Response(
                {'message': 'Passwords do not match'},
                status=status.HTTP_400_BAD_REQUEST)
    except:
        return Response(
            {'message': 'Something went wrong when trying to register account'},
            status=status.HTTP_500_INTERNAL_SERVER_ERROR)

Auth.js

export const register = (
    email,
    username,
    password,
    re_password
    ) => async dispatch => {
    const body = JSON.stringify({
        email,
        username,
        password,
        re_password});


  try {
    const res = await fetch(`${API_URL}/api/account/register`, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: body
    });
    if (res.status === 201) {
        console.log(res)
        dispatch({type: REGISTER_SUCCESS});
    } else {
        console.log(res)
        dispatch({type: REGISTER_FAIL});
    }        
        
  } catch(err) {
    dispatch({type: REGISTER_FAIL});
    alert('Test');
  }

And this is what I get in the console. In this case I would like to have "message" : "Username already exists"

How can I manage to do that ?