React Grid Layout - переопределение статичных полей

Я использую React Grid Layout, чтобы перетаскивать элементы. Пример такого элемента:

<div 
    key={"id" + Math.random().toString(16).slice(2)} 
    data-grid={{ x: 4, y: 0, w: 2, h: 2 }} 
    style={{ width: '150px', height: '40px', backgroundColor: "#ccc", color: "#fff" }}
    resizeHandles={['s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne']}
>
    Поле ввода
</div>

Один из элементов создает новую сетку внутри уже имеющейся:

<div 
    key={"id" + Math.random().toString(16).slice(2)} 
    onClick={doubleClickHandler}
    data-grid={{ x: 1, y: 0, w: 5, h: 7, isResizable: isStatic ? false : true, static: isStatic ? true : false }} 
    style={{ backgroundColor: "#759ad9", color: "#fff" }}
>
    <GridLayout 
        className="layout"
        cols={5}
        rowHeight={30}
        width={650}
    >
        { mock }
    </GridLayout>
</div>

Проблема в том, что я могу передвигать элементы внутри дочерней сетки только тогда, когда ее параметр static равняется true. Я пробовал создать локальный state и изменять переменную isStatic по двойному нажатию по сетке. Значение переменной меняется, однако сетка не становится неподвижной. В то же время, если я просто задам в коде static: true без каких-либо условий, то элементы внутри дочерней сетки можно передвигать. В чем может быть проблема?

Код прилагаю:

import { Menu } from 'antd';
import { useState } from 'react';
import { GridWrapper } from '../Base/Base';
import GridLayout from "react-grid-layout";

function FormConstructor() {
    const items = [
        { label: 'Input', key: 'item-1' },
        // другие элементы
        { label: 'Field', key: 'item-8' },
    ];

    // переменная, которая изменяется, но не влияет на сетку
    const [isStatic, setIsStatic] = useState(false)
    // элементы родительской сетки
    const [elemsList, setElemsList] = useState([])
    // элементы дочерней сетки
    const mock = [
        <div 
            // props
        >
            Поле ввода
        </div>,
        <div 
            // props
        >
            Поле ввода
        </div>,
    ]

    // обработчик двойного клика, который должен делать дочернюю сетку статичной
    const doubleClickHandler = e => {
        if (e.detail === 2) setIsStatic(true)
    }

    const handleClick = val => {
        if (val === 'item-1') {
            setElemsList(elemsList.concat(
                <div 
                    key={"id" + Math.random().toString(16).slice(2)} 
                    data-grid={{ x: 4, y: 0, w: 2, h: 2 }} 
                    style={{ width: '150px', height: '40px', backgroundColor: "#ccc", color: "#fff" }}
                    resizeHandles={['s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne']}
                >
                    Поле ввода
                </div>
            ));
        // другие элементы
        } else if (val === 'item-8') {
            setElemsList(elemsList.concat(
                <div 
                    key={"id" + Math.random().toString(16).slice(2)} 
                    onClick={doubleClickHandler}
                    data-grid={{ x: 1, y: 0, w: 5, h: 7, isResizable: isStatic ? false : true, static: isStatic ? true : false }} 
                    style={{ backgroundColor: "#759ad9", color: "#fff" }}
                >
                    <GridLayout 
                        className="layout"
                        cols={5}
                        rowHeight={30}
                        width={650}
                    >
                        { mock }
                    </GridLayout>
                </div>
            ))
        }       
    }

    // вывод сетки на экран
    return (
        <div style={{display: "flex", height: "100%"}}>
            <GridWrapper options={{style: "width: calc(100% - 300px)"}}>
                <GridLayout 
                    className="layout"
                    cols={12}
                    rowHeight={30}
                    width={1600}
                >
                    { elemsList }
                </GridLayout>
            </GridWrapper>
            <Menu 
                items={items}
                style={{ width: "300px", float: "right", border: "1px solid #D4D1E8", borderRadius: "7px", zIndex: 9000 }} 
                onClick={e => handleClick(e.key)}
            />
        </div>
    )
}