Can I make it work that a card is displayed on the editor (custom component)

Ik probeer een custom block te maken als oplossing voor een wp-challenges opdracht waar ik een block plugin moet maken die een card laat zien.

Ik heb tot nu toe dit geschreven in mijn edit.js

/**

 * 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 { InspectorControls, useBlockProps } from '@wordpress/block-editor';

import { PanelBody, TextareaControl, TextControl } from '@wordpress/components';

/**

 * 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({ attributes, setAttributes }) {

    return (

        <>

            <InspectorControls>

                <PanelBody title={__('Input area', 'TestimonialCard')} >

                    <TextareaControl

                        label={__('Quote', 'TestimonialCard')}

                        rows={2}

                        value={""}

                        onChange={e => console.log(e)}

                    />

                    <TextControl

                      label={__('Your name', 'TestimonialCard')}

                      value={""}

                      onChange={e => console.log(e)}

                    />

                    <TextControl

                      label={__('Job Title', 'TestimonialCard')}

                      value={""}

                      onChange={e => console.log(e)}

                    />

                </PanelBody>

            </InspectorControls>

            <p {...useBlockProps()}>Here must be something displayed</p>

        </>

    );

}

Nu vraag ik me af hoe ik het vooral elkaar kan krijgen dat in de editor de card te zien is en ook dat je tekst kan veranderen.

iemand een hint ?