I have a react app that im using a facial expression detection using an external sdk, here is the current project structure - 
src/
  components/
    Chat.js
    Dial.js
    EmotionCharts.js
    EmotionData.js
    QuadrantDisplay.js
    RealTimeDashboard.js
    VideoFrame.js
  utils/
    logger.js
  App.css
  App.js
  index.html
  manifest.json
  package.json
public/
  favicon.ico
  index.html
  logo192.png
  logo512.png

Here is the current RealtimeDashboard file - 
import React, { useState, useEffect } from 'react';
import EmotionsChart from './EmotionsChart';
import Dial from './Dial';

const RealTimeDashboard = () => {
  // Sample initial values for the state
  const [data, setData] = useState({
    arousal: 0,
    valence: 0,
    attention: 0,
    affects38: {}, // Initially empty, to be filled with emotion data
  });

  // Function to simulate receiving new data (replace this with SDK/WebSocket)
  useEffect(() => {
    const interval = setInterval(() => {
      // Here you’d integrate with the actual SDK or data feed
      // Simulated incoming data (replace with actual SDK data)
      const newData = {
        arousal: Math.random() * 2 - 1, // between -1 and 1
        valence: Math.random() * 2 - 1, // between -1 and 1
        attention: Math.random(),
        affects38: {
          Afraid: Math.random(),
          Amused: Math.random(),
          Angry: Math.random(),
          Annoyed: Math.random(),
          Anxious: Math.random(),
          // ...and more emotions
        },
      };
      setData(newData);
    }, 2000); // Data updates every 2 seconds

    return () => clearInterval(interval); // Cleanup on component unmount
  }, []);

  // Prepare data for the EmotionsChart
  const emotionData = Object.keys(data.affects38).map((key) => ({
    name: key,
    value: data.affects38[key],
  }));

  return (
    <div>
      <h1>Real-time Emotion Dashboard</h1>

      {/* Arousal, Valence, and Attention Dials */}
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <Dial value={(data.arousal + 1) / 2} label="Arousal" max={2} color="orange" />
        <Dial value={(data.valence + 1) / 2} label="Valence" max={2} color="green" />
        <Dial value={data.attention} label="Attention" max={1} color="blue" />
      </div>

      {/* Emotions Bar Chart */}
      <EmotionsChart emotions={emotionData} />
    </div>
  );
};

export default RealTimeDashboard;


And there is the working sdk script - 
<body>
<script src="https://sdk.morphcast.com/mphtools/v1.1/mphtools.js" data-config="cameraPrivacyPopup, compatibilityUI, compatibilityAutoCheck"></script>
<script src="https://ai-sdk.morphcast.com/v1.16/ai-sdk.js"></script>
<script>
CY.loader()
  .licenseKey("<MISSING_LICENSE_KEY>")
  .addModule(CY.modules().FACE_AROUSAL_VALENCE.name, {smoothness: 0.70})
  .addModule(CY.modules().FACE_ATTENTION.name, {smoothness: 0.83})
  .addModule(CY.modules().DATA_AGGREGATOR.name, {initialWaitMs: 2000, periodMs: 1000})
  .load()
  .then(({ start, stop }) => start());


window.addEventListener(CY.modules().EVENT_BARRIER.eventName, (evt) => {
  console.log('EVENT_BARRIER result', evt.detail);
});

window.addEventListener(CY.modules().DATA_AGGREGATOR.eventName, (evt) => {
  console.log('DATA_AGGREGATOR result', evt.detail);
});

MphTools.CameraPrivacyPopup.setText({
   "title": "Allow us to use your camera",
   "description": "This experience is designed to be viewed with your camera on. The next screen will ask your consent to access data from your camera.",
   "url": "https://YOUR_DOMAIN/<YOUR_PRIVACY_POLICY>"
});

</script>

<!-- your body part -->

</body>


Help me integrate it properly with real data in my app.