How to pass parameters (data) from plugin PHP to React

I am experimenting creating a WordPress plugin using create-react-app. To make things simple, I am trying to develop a click-to-tweet plugin.

The shortcode part (in PHP ) looks like:

// Shortcode to output needed markup
add_shortcode( 'react_click_to_tweet', 'react_click_to_tweet_test' );
function react_click_to_tweet_test($atts = [], $content = null, $tag = '') {
    return '<div id="root" data=' . $content . '></div>';
}

function include_react_files() {
  wp_enqueue_style( 'prefix-style', plugins_url('css/main.ae114d0c.css', __FILE__) );

  // add the JS file to the footer - true as the last parameter
  wp_enqueue_script( 'plugin-scripts', plugins_url('js/main.d8745ba2.js', __FILE__),array(),  '0.0.1', true );
}

add_action( 'wp_enqueue_scripts', 'include_react_files' );

$content should be the text to tweet that I want to pass with the shortcode as:

[react_click_to_tweet]TEXT TO TWEET[/react_click_to_tweet]

The index.js has:

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

But this isn’t working.
Any suggestions?

Furthermore, how aI can pass $atts to pass for example attributes to modify the CSS at runtime?

[edit] Based on the suggestions @Paul Burilichev and @belinus I have done the following changes:

I tried what they have about WP AJAX for shortcodes with parameters. I tried:

add_shortcode( 'react_click_to_tweet', 'react_click_to_tweet_test' ); 
function react_click_to_tweet_test($atts = [], $content = null, $tag = '') {
  $o = ''; 
  $o .= '<div id="tweet" >'; 
  if (!is_null($content)) {
    $o .= apply_filters('content', $content);
    // run shortcode parser recursively
    $o .= do_shortcode($content);
  }
  // end box
  $o .= '</div>'; 
  return $o; //'<div id="root" ></div>';
} 

but, it doesn’t work. What am I missing?

Then, I tried:

function include_react_files() {
  wp_enqueue_style( 'prefix-style', plugins_url('css/main.ae114d0c.css', __FILE__) );

  // add the JS file to the footer - true as the last parameter
  wp_register_script( 'plugin-scripts', plugins_url('js/main.d8745ba2.js',  __FILE__),array(),  '0.0.1', true );
  $data = array( 
    'text' => $content, // I also tried passing a string 'some content goes here'
    'key2' =? 'value2',
  );
  wp_localize_script( 'plugin-scripts', 'wp_object', $data );
  wp_enqueue_script( 'plugin-scripts' );
}

add_action( 'wp_enqueue_scripts', 'include_react_files' );

but object is not recognized on my App component. I guess I am still missing something here. my index.js looks like:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import registerServiceWorker from './registerServiceWorker'; 
import './index.css'; 

//const data = "This is some cool stuff"; 
ReactDOM.render( 
  <App />, document.getElementById('root')); 
registerServiceWorker();

And this is my App.js:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    const page = window.location.href;
    let data = page+'&text='+ wp_object.text;
    let twiiterUrl = "https://"+"twitter.com/intent/tweet?url=";
    let URL = twiiterUrl+data;

     //console.log(wp_object.text);
     return (
      <div className="App">
        <div className="tm-click-to-tweet">
            <div className="tm-ctt-text">
                <a href={URL} target="_blank">{wp_object.text} </a>
            </div>
            <a href={URL} className="tm-ctt-btn" target="_blank">Click To Tweet</a>
            <div className="tm-ctt-tip"></div>
            <div className="clear"></div>
        </div>
      </div>
    );
  }
}

export default App;

It doesn’t recognize wp_object;

function json_config_file() {

        $file = plugin_dir_path( __DIR__ ).'PATH_TO_REACT_SRC_FOLDER/wordpress.json';

        $json = array(
            key=> value
        );

        $fp = fopen($file, 'w');
        fwrite($fp, json_encode($json));
        fclose($fp);
    }

let wordpress = require('./wordpress.json');

console.log(wordpress.value)

function include_react_files() {
  wp_enqueue_style( 'prefix-style', plugins_url('css/main.ae114d0c.css', __FILE__) );

  // add the JS file to the footer - true as the last parameter
  wp_register_script( 'plugin-scripts', plugins_url('js/main.d8745ba2.js', __FILE__),array(),  '0.0.1', true );
  $data = array( 
     'key1' => 'value1',
     'key2' =? 'value2',
  );
  wp_localize_script( 'plugin-scripts', 'object', $data );
  wp_enqueue_script( 'plugin-scripts' );
}

add_action( 'wp_enqueue_scripts', 'include_react_files' );