I am tring to make a simple counter and display it to the page. But it renders unexpected o/p. The counter counts a value twice in example 1 but works perfect as i want in example 2. What is the reason for not working in ex.1. What is the background process for this.

// Example: 1
import React, { Component } from 'react';
class Counter extends Component {
    constructor() {
        super()
        this.state = {
            count: 0,
            isFirstTime: true
        }
    }
    in() {
        console.log('How many time function called?'); // consoled one time
        if (this.state.isFirstTime) {
            this.setState({
                isFirstTime: false
            })
            setInterval(() => {
                this.setState({
                    count: this.state.count + 1
                })
            }, 1000)
        }
    }
    render() {
        return (
            <div>
                {this.state.isFirstTime && this.in.apply(this)}
                Counter: {this.state.count}
            </div>
        )
    }
}

export default Counter;

// Example: 2
import React, { Component } from 'react';

let isFirstTime = true;

class Counter extends Component {
    constructor() {
        super()
        this.state = {
            count: 0
        }
    }
    in() {
        console.log('How many time function called?'); // consoled one time
        if (isFirstTime) {
            isFirstTime = false
            setInterval(() => {
                this.setState({
                    count: this.state.count + 1
                })
            }, 1000)
        }
    }
    render() {
        return (
            <div>
                {isFirstTime && this.in.apply(this)}
                Counter: {this.state.count}
            </div>
        )
    }
}

export default Counter;

I am running it on React.StrictMode.