How to use the interactjs.modifiers function in interactjs

.resizable({
            // resize from all edges and corners
            edges: {
                // We don't want it to be resizable from the top since
                // it interferes with the area dedicated to moving the div
                left: true,
                right: true,
                bottom: true,
            },

            ignoreFrom: '#game-chat-modal-header',

            modifiers: [
                // Keep the modal within the bounds of the page
                // (the parent is the  element)
                interact.modifiers!.restrictEdges({
                    outer: 'parent',
                }),

                // Define a minimum size for the modal
                interact.modifiers!.restrictSize({
                    min: {
                        width: 200,
                        height: 200,
                    },
                }),
            ],
        })

        .on('resizemove', (event: any) => {
            // Get the new position based on the delta between the event and the old position
            // (which is conveniently stored in the "data-x" and "data-y" attributes)

default: () => [
        interact.modifiers.restrict({
          restriction: 'parent',
          endOnly: true,
          elementRect: { top: 0, left: 0, bottom: 1, right: 1 },
        }),
      ],
    },