interface params{
  texts: string[];
  handlePropertyTerm: (value:string) => void;
}

let SortOptions = React.memo(({texts, handlePropertyTerm}:params) => (
    <>
      {texts.map((text) => (
        <button key={text} defaultValue={text} onClick={() => handlePropertyTerm(text)}>{text}</button>
      ))}
    </>
));

function App(){
    let [sortProperty, setPropertyTerm] = React.useState("");
    let sortPropertyTerm = React.useCallback((value) => {
        console.log("Callback value:", value);
        setPropertyTerm(value);
    }, []);
    console.log("App");


    return (
    <>
    <SortOptions texts={["hi", "bye"]} handlePropertyTerm={sortPropertyTerm}></SortOptions>
    </>
    );
}

The code i described above creates two buttons one called hi and another called bye each with a callback which causes the sortProperty to contain either "hi" or "bye" depending on the button clicked. After App first loads and i click the hi button, it will log Callback value = hi and App. I believe this is because there was a state change in App causing a re-render. When I click hi the second time the same statements are logged. When I click hi the third time, only the Callback value = hi is logged.

Please can someone explain what is causing App to be re-rendered the second time I click hi but not the third time?