Как реагировать, когда я обновляю состояние одного элемента, вызываются все родительские элементы и их родительские функции, пытаясь понять повторный рендеринг React?

Question

Я создал очень упрощенную версию кода моей проблемы, чтобы понять, как REACT отображается с использованием машинописного текста. Когда я нажимаю кнопку, которая изменяет состояние в самом нижнем дочернем элементе, все родительские элементы обновляются средством визуализации и их дочерними элементами на других вилках. Как я могу изменить приведенное ниже, чтобы этого не происходило.

import * as React from 'react';
import { connect } from 'react-redux';
import './Grid.css';

const RenderPopup = (key: number) => {
    const open = () => setShowDialog(true);
    const [showDialog, setShowDialog] = React.useState(false);
    const close = () => setShowDialog(false);
    if (!showDialog) {
    return (
        <div>
            <button onClick={open}>do it</button>
        </div>
        )
    }
    else {
        return (
            <div>
                <button onClick={close}>close
                </button>
            </div>
        )
    }
}


function Cell(key:number) {
    return (
        <div key={key}>
            {key}
            {RenderPopup(key)}
        </div>
        )
}

const Header = () => {
    return (
        <div className="gridRow">
            {Cell(0)}
            {Cell(1)}
            {Cell(2)}
        </div>

        )
}

const Person = (rowNum: number) => {
    return (
        <div key={rowNum} className="gridRow">
            {Cell(0)}
            {Cell(1)}
            {Cell(2)}
        </div>
        )
}

const Persons = () => {
    return (
        <div>
            {Person(1)}
            {Person(2)}
            {Person(3)}
        </div>
    )
}

const Grid = () => {
    return (
        <div>
            <Header />
            <Persons />
        </div>
    );
}

export default connect()(Grid);