POST and PUT user additional info frontend before refactor

AdditionalInfo.jsx

export default function AdditionalInfo() {
  const [responseMessage, setResponseMessage] = useState(null);
  const [additionalInfo, setAdditionalInfo] = useState({});
  const { access_token, user } = useContext(AuthContext);
  const [isValidPhone, setIsValidPhone] = useState(true);
  const [isValidMobile, setIsValidMobile] = useState(true);

  const requestAdditionalInfo = {
    method: "GET",
    headers: {
      "Authorization": `Bearer ${access_token}`,
      "Accept": "application/json",
      "Content-Type": "application/json",
    },
  };

  useEffect(() => {
    fetch(`${BASE_API}/user/additional_info`, requestAdditionalInfo)
      .then(async response => {
        const data = await response.json();
        if (response.ok)
          return setAdditionalInfo(data);
        return setResponseMessage(data.message);
      })
      .catch(() =>
        setResponseMessage(SERVICE_UNAVAILABLE_ERROR)
      )
  }, []);

  const handleSubmit = async e => {
    e.preventDefault();

    let payload = {
      is_organization_rep: false,
      timezone: "UTC+00:00/Greenwich Mean Time and Western European Time"
    }
    new FormData(e.target).forEach((value, key) => {
      if (key === "username")
        return;
      if (key === "is_organization_rep")
        value = (value === "true") ? true : false;
      if (key === "timezone")
        value = value ? value : "UTC+00:00/Greenwich Mean Time and Western European Time";
      payload[key] = value;
    });
    const requestCreateDetails = {
      method: "POST",
      headers: {
        "Authorization": `Bearer ${access_token}`,
        "Accept": "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(payload)
    };
    fetch(`${BASE_API}/user/additional_info`, requestCreateDetails)
      .then(async response => {
        let data = await response.json();
        if (response.ok)
          return setResponseMessage(data.message)
        if (response.status === 409)
          sendUpdateRequest();
        setResponseMessage(data.message)
      })
      .catch(() => setResponseMessage(SERVICE_UNAVAILABLE_ERROR));
   
    const sendUpdateRequest = () => {
      const requestUpdateDetails = {
        method: "PUT",
        headers: {
          "Authorization": `Bearer ${access_token}`,
          "Accept": "application/json",
          "Content-Type": "application/json",
        },
        body: JSON.stringify(payload)
      };

      fetch(`${BASE_API}/user/additional_info`, requestUpdateDetails)
        .then(async response => {
          let data = await response.json();
          if (response.ok)
            return setResponseMessage(data.message)
          return setResponseMessage(data.message);
        })
        .catch(() => setResponseMessage(SERVICE_UNAVAILABLE_ERROR));
    }
  }

  const validatePhone = e => {
    setIsValidPhone(e.target.checkValidity());
  };
  const validateMobile = e => {
    setIsValidMobile(e.target.checkValidity());
  };

  return 
  // rendering Additional Information page