Custom block breaking when sole item in Cover block

Question

I've created a custom block that implements InnerBlocks and it's works just fine without error when it's inside a Cover block with a Paragraph block as the first child of the Cover block.

When my custom block is the sole item in a Cover block however, and after I click the InnerBlock's appender button, I get this error:

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

react_devtools_backend.js:2560 The above error occurred in the <UncontrolledInnerBlocks> component:
    in UncontrolledInnerBlocks (created by ForwardRef)

My custom block's edit function thus far:

export default function Edit(props) {
  const {clientId, setAttributes} = props;

  return (
    <div {...useBlockProps()} className="simple-carousel-container">
        <InnerBlocks
          orientation="horizontal"
        />
    </div>
  );
}

Answer 1

Thanks Sally, that was indeed the problem. This works perfectly when it's implemented as:

<div {...useBlockProps({className: "simple-carousel-container"})}>

Thanks again :)