How do I customize/add style to the wrapper <DIV> for Header/Footer in react-virtuoso?

[yelnyafacee]

I have react-virtuoso setup like:

            <Virtuoso
                ref={ref}
                style={{
                    // height: '400px'

                    color: "rgba(0, 0, 0, 0.87)",
                    overflowY: "scroll",
                    backgroundImage: "url(/images/bg-whatsapp.png)",
                    backgroundRepeat: "repeat",
                    borderWidth: "thin",
                    display: "block",
                    maxWidth: "100%",
                    outline: "none",
                    textDecoration: "none",
                    transitionProperty: "box-shadow, opacity",
                    wordWrap: "break-word",
                    position: "relative",
                    whiteSpace: "normal",
                    borderRadius: "4px !important",
                    backgroundColor: 'rgb(239, 234, 226)',
                    borderColor: 'rgb(239, 234, 226)',
                    // height: props.showReplyBar? (((props.containerHeight - 165) - 12) - 78) + 'px' : ((props.containerHeight - 165) - 12) + 'px', // '622px'
                    height: props.showReplyBar? ((props.containerHeight - 165) - 78) + 'px' : (props.containerHeight - 165) + 'px', // without 12px
                }}
                totalCount={props.messages.length}
                context={{ props, loading, loadMore, bottomRef }}
                itemContent={
                    (index) => {

                        return (

                            <Message message={props.messages[index]} />

                        )

                    }
                }

                components={{
                    Header,
                    Footer,
                }}
            />

but the Header or Footer code will always be wrapped in a parent <div>, and there seems to be no way to modify/customize the parent wrapper <div>?