Gatsby changes/removes components className after build

Question

I tried to add floating bar to the website. And i have a Layout component that used on every page. The Layout component has some navigation logic, graphQL query and the next jsx:

<>
  <FloatingBar data={floatingBarData} className="floating-bar" />
  <div className="main-container">
    <Container>
      <Header/>
      <Main/>
      <Footer>
    </Container>
  </div>
  <div>
    <Cookies/>
  </div>
<>

So basically, the Floating bar goes first, then all page elements, and cookies. When i am at the development mode everything seems to be fine and i have the next markup:

But when i run gatsby build, i have the next markup:

So the order of the elements is not changed. But the first div that should have the class="floating-bar" has the class="main-container" and the second div that should have the class="main-container" does not have the class at all. But all inner elements are according to the layout.

I tried to replace Fragments with div, move <FloatingBar/> after main container and it did not help. Also i tried to put this bar inside <div className="main-container"/> and got the following markup:

Seems like it gives to the root div of Floating Bar the className of its sibling.

Only when i put the bar before the inner elements of the main container, so that the markup is next:

<>
  <div className="main-container">
    <Container>
      <FloatingBar data={floatingBarData} className="floating-bar" />
      <Header/>
      <Main/>
      <Footer>
    </Container>
  </div>
  <div>
    <Cookies/>
  </div>
<>

Now, it works. The Floating bar component has a state inside to show and hide the bar, and the information about its visibility goes to Session Storoage.

Does anyone knows what exactly is happening?