"useAsyncData" does not show error page on "createError"

export default (handler, options) {
   // $client is just an instance of $fetch.create()
   const {$client} = useApiClient()

    return useAsyncData<TRes>(async () => {
        try {
            return await handler($client)
        } catch (e) {
            // global error on api 5xx errors
            if ((e instanceof FetchError || e instanceof H3Error) && e.statusCode >= 500) {
                console.log('This line is executed. Condition is true')
                throw createError({
                  fatal: true,
                  status: 500,
                  message: 'Foo'
                })
            }

            throw e
        }
    }, options)
}

<script setup lang="ts">
const {data} = await useApiData(($client) => $client('/page/will/be/5xx')))
</script>