Cannot Edit Nor Remove White Box Around Calendly Component in Nextjs

Question

I'm trying to embed a calendly component to a next.js website using react-calendly. The problem is that I have a white box around the calendly component that I cannot get rid off, nor edit (see photo: box between calendar and rest of website).

I even bought premium thinking this would solve the issue. If I embed without using react-calendly I still get the white box.

console log inspection suggests it's some kind of root element?

This is my Inline Component

'use client'
import React from "react";
import { InlineWidget } from "react-calendly";


const containerStyle = {
    width: '100%', // Adjust the width as needed
    height: '500px', // Adjust the height as needed
    backgroundColor: "#090E34",
    // overflow: 'hidden', // Hide any overflow content
};

const CalendlyInline = () => {
  return (
    <div>
      <InlineWidget 
      url="https://calendly.com/appointment/15mins"
      styles={containerStyle}
       />
    </div>
  );
};

export default CalendlyInline;