How to implement the functionality of changing the state without re-rendering?

Question

React

Hello everyone, this is the situation:
I have a panel ActionsItemsPanelwith buttons for filters, etc.. This panel has a button "Create Item" , by clicking on this button a modal should appear, whether the modal is open or not depends on the state of the state ( const [modalOpen, setModalOpen] = useState(false);, this useState lies in component ActionsItemsPanel, can anyone tell me how to open this modal without redrawing the component ActionsItemsPanel, since the modal itself is not in this component? Is it worth moving const [modalOpen, setModalOpen] = useState(false)and if so, where?
Here is the component code:

import React, { useState } from "react";
import { Button } from "@mui/material";

export default function ActionsItemsPanel() {
  const [modalOpen, setModalOpen ] = useState(false);
  const handleButtonClick = () => {};
  return (
    <div>
      <Button onClick={handleButtonClick} variant='text'>
        Create item
      </Button>
    </div>
  );
}