I’m trying to create a somewhat basic custom block that creates a slider based off of the element’s inner/nested blocks. Using React Slick, I’ve ran into an issue where ALL of the inner blocks are being wrapped in a single tag inside of the initialized slick slider element. This means, no matter how many inner blocks I add, there’s only a single slide inside of the slick slider element.

Here’s a screenshot of what’s happening:

I’ve highlighted the to show you how the inner blocks elements (two basic paragraph blocks) are being combined as one singular slide.

Here’s my edit.js:

import { __ } from 'wordpress user/i18n';

import React from "react";

import Slider from "react-slick";

import {
  InnerBlocks,
  useBlockProps,
  useInnerBlocksProps,
    InspectorControls
} from 'wordpress user/block-editor';

import {
  PanelBody,
  PanelRow,
} from 'wordpress user/components';

import './editor.scss';

import classnames from 'classnames';

export default function Edit(props) {

  const blockProps = useBlockProps( {
        className: classnames( {
      'slider': true
        } )
    } );

  var settings = {
   dots: true,
   infinite: true,
   speed: 500,
   slidesToShow: 1,
   slidesToScroll: 1
 };

 const { children, ...innerBlocksProps } = useInnerBlocksProps( blockProps, {
     templateInsertUpdatesSelection: true
 } );
  return (
    <>
    <InspectorControls key="1">
                <PanelBody title={ __( 'Slides' ) }>
          <PanelRow>
            <fieldset>
               Test
            </fieldset>
          </PanelRow>

                </PanelBody>
            </InspectorControls>
      <div { ...innerBlocksProps }>
            <Slider { ...settings }>
                { children }
            </Slider>
      </div>
        </>
    );
}

My gut is telling me this could have something to do with the timing of how the inner blocks get rendered, but I am a bit of a newbie when it comes to building custom blocks. Can anyone steer me in the right direction? I’d really really appreciate it. Thanks!