Plugin’s admin dashboard components not showing up after registering new block

Hello. I need help with something. I am trying to create a basic plugin that will create both admin dashboard page as well as a Gutenberg block. I first started with creating the admin side with React and it was working perfectly fine as I followed this WordPress’s tutorial?here. But then when I registered a block, the admin page is showing up but no React component which only include an input field.

This is my folder structure with only admin side (no block):

my-plugin
  -- build
  -- src
    -- admin
       adminIndex.js
      -- stylesheet
         style.css
      -- components
        -- SomeComponent.js
    index.js
  plugin.php
  package.json

adminIndex.js?file looks like this:

import { render }                   from '@wordpress/element';
import App                          from './components/App/App';

window.addEventListener(
    'load',
    function () {
        render(
            <App />,
            document.querySelector( '#my-plugin' )
        );
    },
    false
);

And this is what?plugin.php?file looks like without block:

class MY_PLUGIN{
    public function __construct() {
        add_action( 'admin_menu', [ $this, 'menu_item' ] );
        add_action( 'admin_enqueue_scripts', [ $this, 'load_admin_scripts' ] );
    }

    public function menu_item() {
        add_menu_page(
            'My Plugin',
            'My Plugin',
            'manage_options',
            'my-plugin',
            ' 
               <h2>Pages</h2>
               <div id="my-plugin"></div>
            ',
            'dashicons-schedule',
            3
        );
    }

    public function load_admin_scripts( $hook ) {
        // Load only on ?page=my-plugin
        if ( 'toplevel_page_my-plugin' !== $hook ) {
            return;
        }

        // Automatically load imported dependencies and assets version.
        $asset_file = include plugin_dir_path( __FILE__ ) . 'build/index.asset.php';

        // Enqueue CSS dependencies.
        foreach ( $asset_file['dependencies'] as $style ) {
             wp_enqueue_style( $style );
        }

        // Load our app.js.
        wp_register_script(
             'my-plugin',
             plugins_url( 'build/index.js', __FILE__ ),
             $asset_file[ 'dependencies' ],
             $asset_file[ 'version' ]
        );
        wp_enqueue_script( 'my-plugin' );

        // Load our style.css.
        wp_register_style(
             'my-plugin',
             plugins_url( 'src/admin/stylesheet/style.css', __FILE__ ),
             array(),
             $asset_file[ 'version' ]
         );
         wp_enqueue_style( 'my-plugin' );
    }
}

Up until this point the app works and the admin page and the react component is showing up. After this I tried adding a block and this is how the folder structure looks like:

my-plugin
  -- build
  -- src
    -- admin
       adminIndex.js
      -- stylesheet
         style.css
      -- components
        -- SomeComponent.js
    -- blocks
       -- block-1
          block.json
          edit.js
          blockIndex.js
          save.js
          editor.scss
          style.scss
    index.js
  plugin.php
  package.json

index.js file is the import of both of those admin and block index files:

import './admin/adminIndex.js
import './blocks/block-1/blockIndex.js';

And in?plugin.php?file I registered the block with this:

add_action( 'init', [ $this, 'register_blocks' ] );

public function register_blocks() {
     register_block_type( __DIR__ . '/build/blocks/block-1' );
}

What am I doing wrong here? Is there something wrong with?enqueuing?scripts above? Admin page worked perfectly fine until i registered a block. Seems like the build is giving the block more priority. Or is it not possible to to have both admin dashboard page and blocks in React and I have to create the dashboard with PHP? Someone please help.