how to properly configure djoser reset password confirm using react frontend

Question

Imtrying to enable users to reset password using djoser and react. The code below is the react app function that sends a request to djoser endpoint to reset to new password

const reset_password_confirm = async (uid, token, new_password, re_new_password) => {


let response = await fetch('http://127.0.0.1:8000/auth/users/reset_password_confirm/', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',  
  },
  body: JSON.stringify(uid, token, new_password, re_new_password)
})

if(!response.ok){
  console.log("password reset confirm fail")
}
}

The problem is with this part body: JSON.stringify(uid, token, new_password, re_new_password)

It sends the body like this

{ poijnmkl;"uid": "MQ",

poijnmkl;"token": "b0na0j-a4319967e84c05dc6dab79ee59208f1e" }

And returns a response of "detail":"JSON parse error - Expecting property name enclosed in double quotes: line 2 column 1 (char 2)"}

When i change it to this body: JSON.stringify({uid, token, new_password, re_new_password})

It sends the body like this

new_password: "poijnmkl;" re_new_password: "poijnmkl;"

token: {uid: "MQ", token: "b0na0j-a4319967e84c05dc6dab79ee59208f1e"}

uid: {uid: "MQ", token: "b0na0j-a4319967e84c05dc6dab79ee59208f1e"}

And the response is {"uid":["Not a valid string."],"token":["Not a valid string."]}

But the uid and token should be separate I think the problem is how the body is sent. Any ideas on how to send it correctly? THANKS