Failed to access R2 Bucket locally as well as in production using Wrangler

// wrangler.toml
name = "nuxt-cf"
compatibility_date = "2024-04-23"
pages_build_output_dir = "./dist"

[[r2_buckets]]
binding = "R2"
bucket_name = "abc"


// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    preset: "cloudflare-pages"
  },
  modules: ["nitro-cloudflare-dev"]
})


// env.d.ts
declare module "h3" {
  interface H3EventContext {
    cf: CfProperties,
    cloudflare: {
      request: Request,
      env: {
        R2: R2Bucket,
      },
      context: ExecutionContext,
    }
  }
}

export {}


// server/api/r2.ts
export default defineEventHandler(async ({ context }) => {
  const obj = await context.cloudflare.env.R2.get('settings/site')
  if (obj === null) {
    return new Response("Object Not Found", { status: 404 });
  }
  return new Response(obj.body)
})


// pages/home.ts
<script setup>
const { data, error, status, pending } = useFetch('/api/r2', {
  lazy: true
})
console.log(data.value)
</script>

<template>
  <div>
    Home Page
  </div>
</template>