Gutenberg Block showing invalid content on edit

The main issue in your code is the following part, whereby you set the attribute source to text which means (after the block/post is saved) the editor will read the value from the inner text of the div returned by your save function:

attributes: {
    content: {
        type: "string",
        source: "text", // this shouldn't be "text"
        default: '// Place your text here!',
    },

So if the save function returned an element with the HTML <div>[myshortcode country="IND", text="Hello World!"]</div>, then with the above attribute settings, the content value would be [myshortcode country="IND", text="Hello World!"] which explains why this happened:

So you should just omit the source property there, i.e. do not specify the attribute source, and just let the editor stores the attribute value in the block comment delimiter.

Other Issues in your code

1. wp.editor.InspectorControls is deprecated and use wp.blockEditor.InspectorControls instead. So use const { InspectorControls } = wp.blockEditor;.

2. In your edit function, country should be part of the attributes like so:

   const {
       attributes: {content, country}, // "country" belongs here
       setAttributes,
       className,
       country                         // NOT HERE, so remove this.
   } = props;
   

3. There’s an unwanted , (comma) in your shortcode ([myshortcode country="' + country + '", text=...), so you should remove that comma.