gutenberg blockListBlock filter block control renders multiple times

Question

I have no clue why Gutenberg render my added BlockControl 3 times, and also to other components, that are not 'core/paragraph'. My code:

const filter_text_highlight_color = createHigherOrderComponent( (BlockListBlock) => {
    return (props) => {

            if (props.name === 'core/paragraph') {

                const startEditing = () => {
                    console.log('hello!');
                }

                return ([
                
                    
                    <BlockListBlock {...props} />,
                    <BlockControls>
                        <ToolbarButton
                            name="link"
                            icon="text-page"
                            title={ __('Highlight Text') }
                            onClick={ startEditing }
                        />
                    </BlockControls>,
                  
                  
                ])

            } else {

                return (
                    <BlockListBlock {...props} />
                )
            }
    }
}, 'filter_text_highlight_color'
); 

addFilter(
    'editor.BlockListBlock',
    'bwwpcode/text-highlight-color',
    filter_text_highlight_color,
)

I would appreciate any suggestions why this is happening and how to solve it.

Answer 1

I have figured it out! The BlockListBlock cannot but used for adding controls to the block. The filter works completely different from that BlockEdit filter.

Changing to the BlockEdit filter made everything works fine!