WordPress block not showing after `npx @wordpress/create-block@latest` and activation

I’ve created my wordpress block using:

npx @wordpress/create-block@latest infobox

Then, once it finished, I’ve activated it in the plugins. But, it doesn’t show in the editor when I search for it in available blocks. Also, I’m not even seeing any errors in the console.

I’ve tried also running npm run build again just to see if that helps.

Here is my file format, I haven’t changed anything from the generated file:

/wp-content/plugins/infobox/
/wp-content/plugins/infobox/src/
/wp-content/plugins/infobox/src/index.js
/wp-content/plugins/infobox/src/edit.js
...
/wp-content/plugins/infobox/build/
/wp-content/plugins/infobox/build/index.js
/wp-content/plugins/infobox/build/edit.js
...

Below is my infobox.php file:

<?php
/**
 * Plugin Name:       Infobox
 * Description:       Example block scaffolded with Create Block tool.
 * Requires at least: 6.1
 * Requires PHP:      7.0
 * Version:           0.1.0
 * Author:            The WordPress Contributors
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       infobox
 *
 * @package CreateBlock
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

/**
 * Registers the block using the metadata loaded from the `block.json` file.
 * Behind the scenes, it registers also all assets so they can be enqueued
 * through the block editor in the corresponding context.
 *
 * @see https://developer.wordpress.org/reference/functions/register_block_type/
 */
function create_block_infobox_block_init() {
    register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'create_block_infobox_block_init' );

Below is my /src/index.js file:

/**
 * Registers a new block provided a unique name and an object defining its behavior.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
 */
import { registerBlockType } from '@wordpress/blocks';

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * All files containing `style` keyword are bundled together. The code used
 * gets applied both to the front of your site and to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './style.scss';

/**
 * Internal dependencies
 */
import Edit from './edit';
import save from './save';
import metadata from './block.json';

/**
 * Every block starts by registering a new block type definition.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
 */
registerBlockType( metadata.name, {
    /**
     * @see ./edit.js
     */
    edit: Edit,

    /**
     * @see ./save.js
     */
    save,
} );

Below is my /src/edit.js file:

/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
 */
import { __ } from '@wordpress/i18n';

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import { useBlockProps } from '@wordpress/block-editor';

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * Those files can contain any CSS code that gets applied to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './editor.scss';

/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
 *
 * @return {Element} Element to render.
 */
export default function Edit() {
    return (
        <p { ...useBlockProps() }>
            { __( 'Infobox – hello from the editor!', 'infobox' ) }
        </p>
    );
}

Is there any reason why the block wouldn’t show? Is there anyway I can debug this?

I’ve even tried putting console.log("Hello infobox") into the index.js file but it doesn’t out in the console (after I’ve npm run build and refreshed)