I am trying to reskin some of the core gutenberg blocks to match a design system I really like.

I am using the core block directory here and importing it into my code but I am getting this error. I downloaded this as a zip folder and dropped it into the core block I was making but when I try to build the block so I can test I get the error below. I have configured babel and plugin transform react jsx

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\Local Sites\gatsbygutenberg\app\public\wp-content\plugins\plugin-main\src\components\src\paragraph\deprecated.js: Support for the experimental syntax 'jsx' isn't currently enabled (143:5):

Code for a block I am making

import * as Chakra from '@chakra-ui/react';
import  {settings as ParagraphSettings}  from '../components/src/paragraph/index.js'
wp.domReady( () => {
     let data = wp.data.select('core/blocks').getBlockTypes();
     console.log(data)
    data.forEach(element => {
        switch(element.name){
            case 'core/paragraph':
            ParagraphSettings.edit = element.edit=(props)=>
                <Chakra.Provider>
            <Chakra.Box>
                     <PlainText onChange={props.setAttributes} value={props.attributes.content}/>
                </Chakra.Box>
            </Chakra.Provider>
            wp.blocks.unregisterBlockType( 'core/paragraph' );
            wp.blocks.registerBlockType('core/paragraph', ParagraphSettings)
            break;

Settings I am exporting from the directory block

export const settings = {
    title: __( 'Paragraph' ),
    description: __( 'Start with the building block of all narrative.' ),
    icon,
    keywords: [ __( 'text' ) ],
    example: {
        attributes: {
            content: __(
                'In a village of La Mancha, the name of which I have no desire to call to mind, there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.'
            ),
            style: {
                typography: {
                    fontSize: 28,
                },
            },
            dropCap: true,
        },
    },
    __experimentalLabel( attributes, { context } ) {
        if ( context === 'accessibility' ) {
            const { content } = attributes;
            return isEmpty( content ) ? __( 'Empty' ) : content;
        }
    },
    transforms,
    deprecated,
    merge( attributes, attributesToMerge ) {
        return {
            content:
                ( attributes.content || '' ) +
                ( attributesToMerge.content || '' ),
        };
    },
    edit,
    save,
};