Sharing data/state between 2 sibling components without rerendering - reactjs

Question

I am building a web app with next.js and am using the PowerBI client to render an iframe with statistics. I can interact with the iframe via the library to update filters and pages. This means the iframe should NOT rerender everytime a prop changes.
The parent component looks like this.
const Dashboard: NextPage = ({ data }) => {
const [activePage, setActivePage] = useState(null);
const DynamicDashboard = dynamic(
() =>
import("../components/dynamicDashboard").then(
(dashboard) => dashboard.default
),
{ ssr: false }
);
return (
<>
<Header setActivePage={setActivePage} />
<DynamicDashboard data={data} activePage={activePage} />
</>
);
};
The header (child 1) looks like this:
export default function ({ setActivePage }) {
const menuItems = [
{
displayName: "page1",
name: "ReportSection5ac5ce426571489b0038",
},
{
displayName: "page2",
name: "ReportSectionf3695be54d17769ba015",
},
{
displayName: "page3",
name: "ReportSection60bb35142132a98c6b86",
},
];
const menuItemClickHandler = (name) => {
setActivePage(name);
};
return (
<>
<header className={styles.header}>
<div className={styles.inner}>
<div className={styles.logo}>
<img src="/assets/images/logo.svg" alt="logo" />
</div>
<ul className={styles.menu}>
{menuItems.map((item) => (
<li key={item.name}>
<a href="#" onClick={() => menuItemClickHandler(item.name)}>
{item.displayName}
</a>
</li>
))}
</ul>
</div>
</header>
</>
);
}
DynamicDashboard (child 2) receives the prop "activePage" like this.
To keep everything simple and focussed on the question I'll keep the contents of this component empty.
export default function DynamicDashboard({ data, activePage }) {}
I understand that the rerender happens because I'm using useState.
However when I want to use useRef I get the message that I'm not allowed to use a ref on a function component.
So basically I want to update the DynamicDashboard component based on events in the Header component without rerendering the whole component.