Ionic React - IonRange not showing up properly

Question

I recently got started with Ionic React and I wanted to experiment with the IonRange component. The following is my IonRange code in JSX (alongside a button and some text):

      <IonApp>
            <IonContent>
                <IonGrid className="align-all-center">
                    <IonRow className="content-padding">
                        <IonButton onClick={updateName}>
                            Press Me!
                        </IonButton>
                    </IonRow>
                    <IonRow className="content-padding">
                        <IonText color="light">
                            Hello {name}!
                        </IonText>
                    </IonRow>
                    <IonRow>
                        <IonRange value={50} pin={true} min={0} max={100}></IonRange>
                    </IonRow>
                </IonGrid>
            </IonContent>
      </IonApp>

However, the result that I get in my browser is this:

When ever I try to scrub that dot, one of the values is:

Thanks for your help.