Why inline styles returns [object Object] in React JSX?

I am trying to set a inline css styles with a state check, but it returns [object Object], how to make it work? I am new to React and do not really understand this return.

      <section
        className="header__banner"
        styles={scrolltop > height ? { marginBottom: `${margin}px` } : ""}
        ref={refHeaderBanner}
      >

Expect(e.g.): styles="margin-bottom: 100px"

Current: styles=[object Object]

>Solution :

it’s return an object because you worte the style between curly brackets, you need to write the style in this way

<section
      className="header__banner"
      styles={scrolltop > height ? `margin-bottom: ${margin}px` : ""}
      ref={refHeaderBanner}
>