Issue with IonItemDivider and Chart.js

I have this code in my Ionic 4 React page:

                <IonContent>
                    <IonItemDivider>
                        <IonLabel>Basic Item Divider</IonLabel>
                    </IonItemDivider>

                    <IonItemDivider color="light">
                        <PvTVprogress targetNum={30} />
                    </IonItemDivider>

                    <IonItemDivider>
                        <h1>This is placeholder page for Statistics</h1>
                    </IonItemDivider>
                </IonContent>

PvTVprogress is just a component to render Chart.js item (Canvas):

return (
    <div>
      <b>Graph: {props.targetNum}</b>
      <canvas id="rankTarget" 
       ref={chartRef}
      ></canvas>
    </div>
  );

I followed this tutorial for the Chart.js part but use functional component instead of class:

Here is the result I get:
37%20PM

After refresh the browser a couple times, the rendering is correct:
23%20PM

My questions is, how do I use IonItemDivider to ensure my content get render correctly everytime?

@ ishaquemujtaba you have any suggestion?

If I just render the graph without enclose in an IonItemDivider tag, the graph do render correctly, but the margin of the graph is way close to the edge of the mobile screen.

Thanks!