Unnecessary <span> wraps custom placeholder

[bolotin-taptima]

Bug description Trying to use LazyLoadComponent with custom placeholder, which is Styled Component. This results in my component to be wrapped by unnecessary <span> element when doing SSR. This behavior is not being reproduced when using usual <div> as a wrapper for placeholder.

To Reproduce

import { LazyLoadComponent } from 'react-lazy-load-image-component';

const Wrapper = styled.div();

type Props = {
    image: string;
};

const MyComponent: FC<Props> = (props) => {
    const { children, image } = props;

    return (
        <LazyLoadComponent threshold={0} placeholder={<Wrapper>{children}</Wrapper>}>
            <Wrapper style={{ backgroundImage: `url(${image})` }}>
                {children}
            </Wrapper>
        </LazyLoadComponent>
    );
};

export default BackgroundGrid;

When doing SSR <div> will be wrapped by <span>.

Expected behavior When doing SSR LazyLoadComponent should render <Wrapper>{children}</Wrapper> as <div>{children}</div> with no additional markup.

Technical details:

• Package version: 1.5.1
• Server Side Rendering: Yes
• Device: Any
• Operating: Any
• Browser: Any