I have a similar kind of issue, where the page is splitting unnecessarily.
I have three components a header, a title and a chart using chart js, the issue is the header and title is coming in the first page and chart is going to the second page keeping the first page blank, so what else I can do here it is working fine when the chart data is fit with in the first page.

Can somebody please help me to fix this issue

Here is the code

 <div className="chart-container">
            <div className="d-flex justify-content-between">
                <label className="chart-title m-2">{props.title}</label>
            </div>
            {data.length == 0
                ? <div className="no-data-placeholder">
                    <span>No Data Found!</span>
                </div>
                : <div id={props.elementID} style={props.style}></div>
            }

        </div>