Overlapped code when `Copy to Clipboard > Image`

I copied the following code from https://github.com/kitze/conditional-wrap

import React from 'react';
import { render } from 'react-dom';
import { Tooltip } from 'react-tippy';

import ConditionalWrap from 'conditional-wrap';

const Button = ({ tooltip, children }) => (
  <ConditionalWrap
    condition={!!tooltip}
    wrap={children => (
      <Tooltip position="bottom" title={tooltip}>
        {children}
      </Tooltip>
    )}
  >
    <button>{children}</button>
  </ConditionalWrap>
);

const Demo = () => (
  <div>
    <Button> Normal button </Button>
    <Button tooltip="Hi there!"> Button with a tooltip! </Button>
  </div>
);

render(<Demo />, document.getElementById('root'));

And it gave this pic → https://twitter.com/deadcoder0904/status/1245953211439165441/

Notice the Button at the bottom is overlapped with the div while in the editor it looks perfect

[deadcoder0904]

I’ll close this one then & add a note there. Since it happened to me twice with the same code 😂

[deadcoder0904]

Yep, it gives the same. Here you go (I did this just now) 👇