I have the following sample react code

const A = () => {
    const [value1, setValue1] = React.useState(true);
    const [value2, setValue2] = React.useState(true);

    return (
    <div>
        <div class="first-comp">
             <FirstComponent data1={value1} data2={value2} />
        </div>
        <div class="second-comp">
             <SecondComponent onChange={() => {setValue1(false); setValue2(false);}} />
        </div>
    </div>
    )
}

When the SecondComponent is calling onChange, then both "first-comp" and "second-comp" are being re-rendered on the screen.

Since on re-rendering of SecondComponent, my scroll is resetting (i.e. If I had scrolled the internal scrollbar down in SecondComponent, on rerendering the SecondComponent renders at the top and not at the point where I had last scrolled to)

Is there a way that, when onChange changes the stateVariables, the <SecondComponent /> does not get re-rendered or the scroll does not get disturbed in SecondComponent or somehow the scroll gets preserved?