Flask & React JS error 422 (UNPROCESSABLE ENTITY) - reactjs

Question

Trying to read some data from the /profile route of my flask api. I keep getting error 422 unprocessable entity. This is on my Home.tsx file where I am already authenticated and am trying to read some more data from flask.
picture of error
I have no issues getting a response from the api when getting tokens via /tokens. I followed this guide here exactly to connect flask to react and I have no idea why it is not working.
I am pretty comfortable with React but very new to flask to please forgive me. Any help with this would really be appreciated.
It looks like if I get rid of #jwt_required() it does work but my understanding is this should be used.
base.py
api = Flask(__name__)
CORS(api)
api.config["JWT_SECRET_KEY"] = "please-remember-to-change-me"
api.config["JWT_ACCESS_TOKEN_EXPIRES"] = timedelta(hours=1)
jwt = JWTManager(api)
#api.after_request
def refresh_expiring_jwts(response):
try:
exp_timestamp = get_jwt()["exp"]
now = datetime.now(timezone.utc)
target_timestamp = datetime.timestamp(now + timedelta(minutes=30))
if target_timestamp > exp_timestamp:
access_token = create_access_token(identity=get_jwt_identity())
data = response.get_json()
if type(data) is dict:
data["access_token"] = access_token
response.data = json.dumps(data)
return response
except (RuntimeError, KeyError):
# Case where there is not a valid JWT. Just return the original response
return response
#api.route('/token', methods=["POST"])
def create_token():
email = request.json.get("email", None)
password = request.json.get("password", None)
if email != "test" or password != "test":
return {"msg": "Wrong email or password"}, 401
access_token = create_access_token(identity=email)
response = {"access_token":access_token}
return response
#api.route("/logout", methods=["POST"])
def logout():
response = jsonify({"msg": "logout successful"})
unset_jwt_cookies(response)
return response
#api.route("/profile", methods=["GET"])
#jwt_required()
def my_profile():
response_body = {
"name": "Michael",
"about" :"Admin"
}
return response_body
Home.tsx
import { useEffect, useState } from "react";
import { BsPersonFill, BsCalendarFill } from "react-icons/bs";
import { RiTeamFill } from "react-icons/ri";
import { BiLogOut } from "react-icons/bi";
import axios from "axios";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
const Home = (props: any) => {
const [profileData, setProfileData] = useState<any>(null);
function getData() {
axios({
method: "GET",
url: "http://127.0.0.1:5000/profile",
headers: {
Authorization: "Bearer " + props.token,
},
})
.then((response) => {
const res = response.data;
res.access_token && props.setToken(res.access_token);
setProfileData({
profile_name: res.name,
about_me: res.about,
});
})
.catch((error) => {
if (error.response) {
console.log(error.response);
console.log(error.response.status);
console.log(error.response.headers);
}
});
}
useEffect(() => {
getData();
}, []);
Tried searching for this on other threads and nothing I tried worked such as messing with authorization header, did not make a difference. It works fine when sending the request with postman.