React Remix UseActionData() Not Triggered by incoming Webhook POST request

I have the action setup in a Remix React project as below to handle both Form Data & a JSON POST request from a webhook.

Both are working as expected and output the data to the console when received. However only the Form request ends up within UseActionData() the JSON post data does not show within this hook.

Does UseActionData() only work with Form data and if so how could I trigger a function when the webhook is successful? Any help is much appreciated!

export async function action({ context, request }) {
  const type = request.headers.get("content-type") 
  console.log(type)

  if (type === "application/json") {
    // Got Data
    console.log("Webhook")
    let data = await request.json()
      
    return ({data})
  } else { 
    const formData = await request.formData();
    const SendParts = formData.get("Query") 
    if (SendParts !== null) {
      const id = await context.new.query(SendParts, {
        cache: CacheShort(),
      });
      return ({ id });
    }
  }
  return  null;
}

// Handle Result of each Action
const actionData =  useActionData();
useEffect(() => {
  if (actionData != null) {
    console.log("ACTION")
    console.log(actionData)
  }
}, [actionData]);