WordPress Gutenberg Custom Block Issues

import { registerBlockType } from "@wordpress/blocks";
import { useSelect } from "@wordpress/data";
import { useState } from "@wordpress/element";
import { Button, TextControl } from "@wordpress/components";

const dummyData = [
    { id: 1, title: "Term 1", excerpt: "Description of Term 1" },
    { id: 2, title: "Term 2", excerpt: "Description of Term 2" },
    { id: 3, title: "Term 3", excerpt: "Description of Term 3" },
    // Add more dummy data as needed
];

registerBlockType("custom-blocks/medical-terms", {
    title: "Medical Terms",
    category: "widgets",
    edit: () => {
        const [search, setSearch] = useState("");
        // Use dummyData directly instead of fetching from WordPress
        const terms = dummyData.filter((term) =>
            term.title.toLowerCase().includes(search.toLowerCase()),
        );

        return /*#__PURE__*/ React.createElement(
            "div",
            null,
            /*#__PURE__*/ React.createElement(TextControl, {
                label: "Search",
                value: search,
                onChange: setSearch,
            }),
            /*#__PURE__*/ React.createElement(
                "div",
                null,
                /*#__PURE__*/ React.createElement(Button, null, "All"),
                [...Array(26)].map((_, index) =>
                    /*#__PURE__*/ React.createElement(
                        Button,
                        {
                            key: index,
                            onClick: () => setSearch(String.fromCharCode(65 + index)),
                        },
                        String.fromCharCode(65 + index),
                    ),
                ),
            ),
            /*#__PURE__*/ React.createElement(
                "ul",
                null,
                terms.map((term) =>
                    /*#__PURE__*/ React.createElement(
                        "li",
                        {
                            key: term.id,
                        },
                        /*#__PURE__*/ React.createElement("h3", null, term.title),
                        /*#__PURE__*/ React.createElement("div", {
                            dangerouslySetInnerHTML: {
                                __html: term.excerpt,
                            },
                        }),
                    ),
                ),
            ),
        );
    },
    save: () => null,
});

enter image description here

enter image description here

I’ve developed a custom WordPress block for displaying medical terms. The block functions perfectly in the editor page, allowing users to search for terms and displaying the results accordingly. However, when I view the page on the frontend where the block should be displayed, it doesn’t appear.

Request for Assistance:

I’m seeking assistance to troubleshoot why my custom WordPress block isn’t displaying on the frontend despite functioning correctly in the editor. Any insights, suggestions, or further troubleshooting steps would be greatly appreciated.

Thank you in advance for your help!