如何通过rest api更新react钩子中的按钮状态？

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const ButtonComponent = () => {
  const [buttonState, setButtonState] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);

        const response = await axios.put('/api/updateButtonState', {
          // 根据实际需要，传递需要更新的数据
          // 如：{ buttonState: true }
        });

        setButtonState(response.data.buttonState);
      } catch (error) {
        console.error(error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <button disabled={loading}>{buttonState ? '已启用' : '已禁用'}</button>
    </div>
  );
};

export default ButtonComponent;