Need help fixing the Content Security Policy error in my application

I've build an ecommerce website and added the razorpay payment gateway. Everything was working fine till I installed helmet.js and now it doesn't work. Ive searched all over the internet but can't seem to fix the issue :(. I get the following error:

image "Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src-attr 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present."

 code:

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: [],
      connectSrc: [
        "'self'",
        "'unsafe-inline'",
        // "https://use.fontawesome.com",
        "https://ka-f.fontawesome.com/",
        "https://res.cloudinary.com/",
        "https://*.razorpay.com/",
      ],
      scriptSrc: [
        "'unsafe-inline'",
        "'unsafe-eval'",
        "'self'",
        ...scriptSrcUrls,
      ],
      styleSrc: [
        "'self'",
        "'unsafe-inline'",
        ,
        // "https://use.fontawesome.com",
        ...styleSrcUrls,
      ],
      workerSrc: ["'self'", "blob:"],
      objectSrc: [],
      mediaSrc: ["https://res.cloudinary.com/"],
      imgSrc: [
        "'self'",
        "blob:",
        "data:",
        "https://res.cloudinary.com/",
        "https://images.unsplash.com/",
      ],
      frameSrc: ["https://*.razorpay.com/"],
      fontSrc: [
        "'self'",
        "fonts.googleapis.com",
        // "themes.googleusercontent.com",
        "fonts.gstatic.com",
        // "https://use.fontawesome.com",
        "https://ka-f.fontawesome.com/",
      ],
    },
    
    crossOriginResourcePolicy: { policy: "cross-site" },
  })
);

Any help would be appreciated, Thanks!