Как передать массив как опору от одного компонента к другому в реакции

Question

Привет, у меня есть два компонента, которые я использую в своем проекте, и у меня есть массив логических значений, по сути, для проверки, установлен ли переключатель или нет. Я хочу иметь возможность передавать массив в качестве подпорки от компонента, который я анализирую, в котором я создал массив, во второй компонент, который позволяет мне рисовать графики в соответствии с количеством отмеченных переключателей, которые содержатся в массиве. Ниже приведены фрагменты моего кода:

// When radio buttons checked, change corresponding value in array if 0 change to 1 and if 1 change 
to 0
// This will be used in the graph component, and will enable the functionality of selcting one region 
or multiple region.
// As the graph will be plotted based on which regions are noted 1 in the array 

import React from 'react';
import $ from "jquery";

const Test = props => {
const total_regions = (JSON.parse(JSON.stringify(props.test)).length); // gets the number of regions
var ROI = [];
for (var i = 0; i < total_regions.length; i++) { // Array to represent which regions need to be 
displayed
ROI[i] = 0; // deault setting all regions equal 1 as must be displayed
}
//when a radio button is clicked change its corresponding in the array 
const handleClick = (item, idx) => {
if(ROI[idx] == 1){ // if region displayed and clicked -> undisplay region 
  ROI[idx] = 0; 
}else{ // if region not displayed and clicked -> display region 
    ROI[idx] = 1; 
 }
  console.log(`Array ${ROI[idx]} with index ${idx} clicked`); // Used to test functionality of array 
 };

return (
 // displays radio buttons depending on the number of objects in json
  <div>
 {props.test.map((item, idx) => { 
   return (
    <label key={idx}>
      <input className="region" type="radio" value={idx} onClick={() => handleClick(item, idx)}/>
      <span>{idx}</span> 
    </label>
    );
  })}  
  </div>
   );
 };
export default Test;

Это компонент графика

import React, { Component } from "react";

import Chart from "react-google-charts";
import { jsonData } from "./Output.js";
import test from "./Test.js";

class Graph extends Component {
  constructor() {
    super();
    this.allData = JSON.parse(jsonData).map((o) => [
      o.frame_number,
      o.intensity0,
      o.intensity1,
    ]);
    this.d2 = [
      ["Frame", "Int-0", "Int-1"],
      [1, 1, 1],
    ]; // dummy first data point to prevent initial chart data error
    this.di = 0;
    this.state = { data: this.d2 };
    this.interval = setInterval(() => {
      if (this.di < this.allData.length) this.d2.push(this.allData[this.di++]);
      else clearInterval(this.interval);
      this.setState({ data: this.d2 });
    }, 500);
  }

  makeArray(){
    var ROIS = test.ROI;
    return ROIS;
  }

  render() {
    this.makeArray();
    console.log(this.ROIS);
    return (
      <Chart
        width="100%"
        height="400px"
        chartType="LineChart"
        data={this.state.data}
        options={{
          hAxis: { title: "Frame" },
          vAxis: { title: "Intensity" },
          legend: { position: "bottom" },
        }}
      />
    );
  }
}
export default Graph;