Hey, i have a issue where my button stops working as intended, i made a small template to better visualize the issue, on my page i have this button:

"use client";

export default function Home() {
    const handleClick = () => {
    alert('kaboom');
  };

  return (
    <div>
      <button onClick={handleClick}>
        Click me
      </button>
    </div>
  );
}

and this is my middleware (CSP):

import { NextRequest, NextResponse } from 'next/server'
 
export function middleware(request: NextRequest) {
  const nonce = Buffer.from(crypto.randomUUID()).toString('base64')

  const cspHeader = `
    script-src 'nonce-{nonce}' 'strict-dynamic';
    object-src 'none';
    base-uri 'none';
`
  // Replace newline characters and spaces
  const contentSecurityPolicyHeaderValue = cspHeader
    .replace(/\s{2,}/g, ' ')
    .trim()
 
  const requestHeaders = new Headers(request.headers)
  requestHeaders.set('x-nonce', nonce)
 
  requestHeaders.set(
    'Content-Security-Policy',
    contentSecurityPolicyHeaderValue
  )
 
  const response = NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  })
  response.headers.set(
    'Content-Security-Policy',
    contentSecurityPolicyHeaderValue
  )
 
  return response
}

now my issue is that if i click the button the handleClick will not get executed in combination with the CSP. any ideas what could cause this and how to fix this?