New to React, got this error:

You have tried to stringify object returned from css function. It isn't supposed to be used directly (e.g. as value of the className prop), but rather handed to emotion so it can handle it (e.g. as value of css prop).

Here is my code:

 import React from 'react';
    import {Header} from "./Header"
    import {HomePage} from "./HomePage"
    
    
    import { FontFamily, FontSize, gray2 } from './Styles';
    /** @jsxRuntime classic */
    /** @jsx jsx */
    import { css, jsx } from '@emotion/react';
    
    
    
    function App() {
    
      return (
          <div data-css={css`
            font-family: ${FontFamily};
            font-size: ${FontSize};
            color: ${gray2};
          `}>
          
          <Header/>
          <HomePage/>
        </div>
      );
    }
    
    export default App;

Styles file:

export const gray1 = '#383737';
export const gray2 = '#5c5a5a';
export const gray3 = '#857c81';
export const gray4 = '#b9b9b9';
export const gray5 = '#e3e2e2';
export const gray6 = '#f7f8fa';
export const primary1 = '#681c41';
export const primary2 = '#824c67';
export const accent1 = '#dbb365';
export const accent2 = '#efd197';
export const FontFamily = "'Segoe UI', 'Helvetica Neue',sans-serif";
export const FontSize = '26px';