AWS API gateway serverless 502 internal server error - Malformed Lambda proxy response

Question

I have this problem that is driving me nuts. I am constructing a serverless application with aws API gateway and lambda. At the end of lambda handler, I asked it to return a dictionary as follows:

# lambda handler
def lambda_handler(event, context):
    # check request type
    method = event["httpMethod"]
    
    if method == "PUT":
        body = event["body"]
    else:
        return {
            "statusCode":404,
            "headers":{
                "Content-Type": "application/json"
            },
            "body":{"message":f"{method} method is not supported"},
            "isBase64Encoded": False
        }

The testing within the lambda function turns out to be functioning as what it supposes to be. However, when I was testing from the endpoint, I got the following:

Fri Mar 18 16:11:40 UTC 2022 : Endpoint response body before transformations: {"statusCode": 404, "headers": {"Content-Type": "application/json"}, "body": {"message": "GET method is not supported"}, "isBase64Encoded": false}
Fri Mar 18 16:11:40 UTC 2022 : Execution failed due to configuration error: Malformed Lambda proxy response
Fri Mar 18 16:11:40 UTC 2022 : Method completed with status: 502

I have been dangling on this for quite some hours. Did I miss something?

PS: The method I used to call is GET which suppose to return a 404. However, it keeps giving me Malformed Lambda proxy response error and a status code 502. What can I do to fix this?