My gutenberg editor block seems out of order

I am writing a customized gutenberg editor block, it is a dynamic block, server facet rendered, it reveals only a “dummy” picture for now however I am dealing with two points with it:

1. When the editor masses the web page, the block is rendered above your complete editor with content material coming from the server, it triggers a total web page load really.

2. After I preview the web page the block is out of order, it all the time seems first.

You may see a screencast on the finish.

Editor block code:

import { registerBlockType } from '@wordpress/blocks';
import {
  useBlockProps,
  InspectorControls
} from '@wordpress/block-editor';
import {
  PanelBody,
  TextareaControl
} from '@wordpress/elements';
import imgFeaturedPostsType3 from './featured-posts-type-3.svg'

registerBlockType(
  'pdb/theme-featured-posts-type-3',
  {
    apiVersion: 2,
    title: 'Posts em Destaque (5 Posts)',
    description: 'Exibe os 5 posts mais recentes (ou fixados) como destaque',
    class: 'theme',
    icon: 'format',
    key phrases: ['posts', 'tema', 'destaque', 'home'],

    instance: {
      attributes: {
        exclude_categories: '',
        exclude_tags: ''
      }
    },

    attributes: {
      exclude_categories: {sort: 'string', default: ''},
      exclude_tags: {sort: 'string', default: ''}
    },

    edit: ({ attributes, setAttributes }) => {
      const blockProps = useBlockProps();

      return (
        <div { ...blockProps }>
          <InspectorControls>
            <PanelBody
              title="Configurações"
              initialOpen={ true }
            >
              <TextareaControl
                worth={ attributes.exclude_categories }
                label="Categorias Excluídas"
                rows={ 3 }
                assist={ <>
                  Uma lista separada por vírgula contendo slugs de categorias a serem excluídas, por exemplo: <i>categoria1, categoria2</i>
                </> }
                onChange={ (worth) => setAttributes({exclude_categories: worth}) }
              ></TextareaControl>

              <TextareaControl
                worth={ attributes.exclude_tags }
                label="Tags Excluídas"
                rows={ 3 }
                assist={ <>
                  Uma lista separada por vírgula contendo slugs de tags a serem excluídas, por exemplo: <i>tag1, tag2</i>
                </> }
                onChange={ (worth) => setAttributes({exclude_tags: worth}) }
              ></TextareaControl>
            </PanelBody>
          </InspectorControls>

          <img src={ imgFeaturedPostsType3 } type={ {width: '100%', peak: 'auto'} } />
        </div>
      );
    }
  }
);

Server facet code:

wp_register_script(
      'pdb-theme-fix-blocks',
      '/editor-blocks.js',
      ['react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element'],
      '1.0'
    );

    register_block_type(
      'pdb/theme-featured-posts-type-3',
      [
        'editor_script'   => 'pdb-theme-fix-blocks',
        'render_callback' => function ($block_attributes, $content) {
          echo '<img src="/featured-posts-type-3.svg" style="width: 100%; height: auto;">';
        }
      ]
    );

All the things works as anticipated apart from the issues above.