Issue with InnerBlock's template prop in version > 5.4.4

[WYKDev]

Describe the bug
I am running into an issue with InnerBlock's template prop. When I increase or decrease count, it doesn't change. Only when I refresh the editor the change maybe apply. This happens in the version > 5.4.4. Version 5.4.4 was fine without this issue.

Screen Recorded

Below is a simple reproduction of code.

   // Import WP Gutenberg Components
   const { InnerBlocks, InspectorControls } = wp.blockEditor
   const { Component } = wp.element
   const { 
      PanelBody, RangeControl
   } = wp.components


   const { __ } = wp.i18n;


   const getTemplates = (items, block) => {
      // Tempporary store
      const store = [];
      // Slot each template into the store 
      for(let i=0; i<items; i++) store[i] = [block];

      return store;
   };


   const IB_OPTIONS = {
      templateLock: 'all'
   };


   class PanelColumns extends Component {
      
      constructor() {
         super(...arguments);
      }

      render() {
         const {
            PanelBody, RangeControl,
            attributes, setAttributes,
         } = this.props;

         const { items } = attributes;

         const Items = <RangeControl
            label={ __('Number of items in the section') }
            value={ items }
            onChange={ items => setAttributes( { items } ) }
            min={ 1 }
            max={ 12 }
         />

         // Debug Logger
         // console.log(attributes);
         
         return (
            <PanelBody title={ __('Columns') } initialOpen={ true }>
               
               { Items }
            </PanelBody>
         );
      }
   };


   export default function ({ clientId, attributes, className, setAttributes }) {
      
      const {
         items
      } = attributes

      // Common options needed for each Panel Control on right side of the editor
      const PanelCommonOptions = { attributes, setAttributes, PanelBody }

      // Save the InnerBlocks in a new variable
      const innerBlockContent = <InnerBlocks { ...IB_OPTIONS } template={ getTemplates(items, 'core/image') } />
      console.log(innerBlockContent)
      return (
         <>
            <InspectorControls>
               
               <PanelColumns {...{ RangeControl, ...PanelCommonOptions }} />

            </InspectorControls>

            <div className={ className } >
               { innerBlockContent }
            </div>
         </>
      )
   }

[talldan]

There's a related issue (#16955), but the key difference here is that your example shows templateLock set to all.

When template lock is set that way, the template synchronises more regularly and should update the existing content:

gutenberg/packages/block-editor/src/components/inner-blocks/use-inner-block-template-sync.js

Lines 48 to 50 in 35a94fd

	// Only synchronize innerBlocks with template if innerBlocks are empty or
	// a locking all exists directly on the block.
	if ( innerBlocks.length === 0 || templateLock === 'all' ) {

The bug is that the react hook that updates the template doesn't have the template variable listed in its dependencies, so isn't triggered when that value changes:

gutenberg/packages/block-editor/src/components/inner-blocks/use-inner-block-template-sync.js

Line 72 in 35a94fd

}, [ innerBlocks, templateLock, clientId ] );

Prior to this being rewritten to a React hook, this functionality used the componentDidUpdate lifecycle method, so didn't have a concept of dependencies.

I have a fix in progress (it's a one-liner fix but I'll try to add some tests to prevent future regressions.)