Gadget background: solid color issue in dark mode only

I have noticed that in dark mode, my custom UI dashboard gadget get some sort of weird dark color behind rendered fields; this is not apparent in light mode.

in my index.js I have the following:

import { view } from '@forge/bridge';
import { setGlobalTheme } from '@atlaskit/tokens';
import '@atlaskit/css-reset';

setGlobalTheme({ light: 'light', dark: 'dark', colorMode: 'auto' });

This works great except for the weird background (see below) I included a vanilla gadget to show the difference.

Has anyone had this issue before?

I was able to fix this by putting all content within a <div> with the following style:

backgroundColor: token('elevation.surface.raised')
function Edit() {
  const onSubmit = (formData) => view.submit(formData);
  return (
    <div style={{backgroundColor: token('elevation.surface.raised'),}}>
      <Form onSubmit={onSubmit}>
              //Form code

I also had to set this within my index.html

<body style="background-Color: var(--ds-surface-raised)">