I have a React SPA AEM project, when I going to create a new component then it's not showing the client browser. my current progress is:

1. created a react component like

    import React from 'react';
    import { MapTo } from '@adobe/aem-react-editable-components';
    import './Button.scss';
    
    const RESOURCE_TYPE = 'abbve-spa-ous/components/content/button';
    
    const ButtonConfig = {
        emptyLabel: 'Button',
    
        isEmpty: props => {
            return false;
        }
    };
    
    const Button =props => {
      return (
        <button>${props.text} Button text</button>
      )
    }
    
    MapTo(RESOURCE_TYPE)(Button, ButtonConfig);

2. import it in import-components.js
3. update mock data in a public folder like this:

"button": {
                  "id": "button-ergrt454",
                  "text": "Button text",
                  ":type": "abbvie-spa-ous/components/content/button"
                }

check the screenshot: https://prnt.sc/vSMf4ObJQdY8 or visit the link: https://codesandbox.io/s/mock-data-aem-demo-component-xhscyg?file=/src/data.json

but the problem is not showing in the browser this change. how can I overcome this problem any idea or suggestion plz!

Thanks Advance