Как реализовать функционал изменения стейта без перерендера?

Question

[JavaSscriptNoob]

Всем привет , такая ситуация :
У меня есть панель ActionsItemsPanel с кнопками фильтрами и тд.. На этой панели есть кнопка "Create Item" , по нажатию на эту кнопку должна появлятся модалка , открыта модалка или нет зависит от состояния стейта ( const [modalOpen, setModalOpen] = useState(false); , этот useState лежит в компоненте ActionsItemsPanel , кто может подсказать как сделать открытие этой модалки без перересовки компонента ActionsItemsPanel , так как сама модалка не лежит в этом компоненте ? Стоит ли перенести const [modalOpen, setModalOpen] = useState(false) и если да то куда ?
Вот код компонента :

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>
  );
}

Comments

[insighter]

DOM элементы модалки созданы или нет? Если созданы то в обработчике onClick и показывай как в обычном JS.

Почему не хочешь чтобы повторно рендерился (отрисовка неправильный термин) компонент?

[Alexandroppolus]

Вот код компонента

Это ведь сильно упрощённый код? Модалка рендериться где-то внутри ActionsItemsPanel?