handling a user gesture to show a file picker react issue

I have a react code. Its downloading file from the server. After file data load I need to save it using showSaveFilepicker. So I tried to do this like below.

    useEffect(() => {
  const getDatas = async () => {
    if (downloadData) {
      debugger;
      if(clickedCheckout === true)
      {  
        const options = {
          types: [{
            description: 'Text file',
            accept: {'application/msword': ['.docx']},
          }],
        };
 
        const handle = await window.showSaveFilePicker(options);
       await writeFile(handle, downloadData) 
        return handle;
      }
    }
  }
  getDatas()
});

But I am getting this error. Also I have no idea to pass my blob data to this.

Unhandled Rejection (SecurityError): Failed to execute 'showSaveFilePicker' on 'Window': Must be handling a user gesture to show a file picker.

I can't add this directly to the button click. After button click my document data loading. that's why i have added it inside useeffect.

Button click event code.

 {
    key: "CheckOut",
    text: _setCheckoutText(item),
    onClick: async () => {
      await onCheckoutDocuments(item.class,item.sheetNo,item.fileNo,item.title);  
    },
  }

Please give suggestions to fix this.