Как избежать перерисовки незатрагиваемых компонентов

import React, { useState, useEffect } from "react";
import "./styles.css";
 
import { AgGridColumn, AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";
 
const srcMes = "Выберите в гриде строку и нажмите на зелёную кнопку";
const srcColor = "lightgreen";
const srcButMes = "Перерисвка сообщения";
 
export default function App() {
  var GridData = [
    { name: "item1" },
    { name: "item2" },
    { name: "item3" },
    { name: "item4" },
    { name: "item5" }
  ];
  const [color, Set_color] = useState(srcColor);
  const [mes, Set_mes] = useState(srcMes);
  const [butMes, Set_butMes] = useState(srcButMes);
 
  const ContactsGrid = ({ rowD }) => {
    const [gridApi, setGridApi] = useState(null);
    const [gridColumnApi, setGridColumnApi] = useState(null);
 
    const [rowData, setRowData] = useState(rowD);
 
    const onGridReady = (params) => {
      setGridApi(params.api);
      setGridColumnApi(params.columnApi);
    };
 
    const onRowClicked = (node) => {};
 
    return (
      <div>
        <div style={{ height: "20vh" }}>
          <div
            className="ag-theme-alpine"
            style={{ height: "100%", width: "100%" }}
          >
            <AgGridReact
              rowSelection="single"
              onGridReady={onGridReady}
              onRowClicked={onRowClicked}
              rowData={rowData}
              headerHeight="0"
            >
              <AgGridColumn
                headerName="Человек или группа"
                field="name"
                cellStyle={{
                  "text-align": "left"
                }}
                flex="1"
                filter="agTextColumnFilter"
              ></AgGridColumn>
            </AgGridReact>
          </div>
        </div>
      </div>
    );
  };
 
  const onClick = () => {
    if (color !== "yellow") {
      Set_color("yellow");
      Set_mes(
        "Изменились цвет и текст сообщения, но и перерисовался грид. Как оставить грид нетронутым ?"
      );
      Set_butMes("Ещё раз");
    } else {
      Set_color(srcColor);
      Set_mes(srcMes);
      Set_butMes(srcButMes);
    }
  };
 
  return (
    <>
      <h2 style={{ backgroundColor: color }}>{mes}</h2>
      <ContactsGrid rowD={GridData} />
      <button style={{ backgroundColor: color }} onClick={onClick}>
        {butMes}
      </button>
    </>
  );
}