我有一个OCR API，它从给定的图像返回文本，数据来自客户端，在控制台中可见。但是元素没有更新数据。
这是我的代码

const onCrop = async () => {
    const cropper = cropperRef.current;
    if (cropper) {
      const canvas = cropper.getCanvas();
      const img_data = canvas.toDataURL("image/jpg");
      if (canvas) {

        const getOcrData  =  await fetch("/api/ocr", {
            method: "POST",
            headers: { "content-type": "application/json" },
            body: JSON.stringify({ file: img_data }),
          });
         
        const data = await getOcrData.json();
         
        console.log(data.fullTextAnnotation.text);
        const ocrData = data.fullTextAnnotation.text;
        
        return {
          props: { ocrData }
        };
      }
    }
  };

并且页面元素

const Guestbook = ({ fallback, ocrData  }) => {

  const [getOcrData, setOcrData] = useState(ocrData);

  // useEffect(() => {
  //   let {data} = onCrop();
  //   setOcrData(data); // sets ariaInfo state
  // } 
  // , []);

  return (
    <SWRConfig value={{ fallback }}>
      <main className="max-w-4xl mx-auto p-4">
        <AppHead />
          
        <div className="flex flex-row content-center">
            <div className="basis-1/2">
            <Example />
            </div>
            <div className="basis-1/2">
              <p>OCR Data</p>
              <p>{getOcrData}</p>
            </div>
          </div>
        
      </main>
    </SWRConfig>
  );
};

谁能帮我找出我做错了什么。
我需要getOcrData中的数据。