"Cannot read property loadSaveData of null " OR"Cannot read property 'current' of undefined "

[priyanka-zotalabs]

Code :-

import React, { useState, useEffect,useRef, } from "react";
import {Modal,Row,Col,Form,} from "react-bootstrap";

import {Paper, makeStyles,Button,} from "@material-ui/core";
import CanvasDraw from "react-canvas-draw";

const Homework = (props) => {

const valueRef2 = useRef(
Array.from({ length: 50 }, () => React.createRef())
);

console.log("show doodle", valueRef2, valueRef2.current);

// getting required data in homework from previouse component
const [homeworkDatasss1, setHomeworkDatasss1] = useState(homework);

useEffect(() => {
if (homeworkDatasss1) {
homeworkDatasss1.forEach((element) => {
console.log("element", element);
if (element.status == "checked") {
element.submittedHomework.submittedHomeworkUrls.forEach((test2) => {
console.log("student data", test2);

// getting all data of test2.index & test2.doodle
console.log("doodle data",test2.index,test2.doodle)

          valueRef2.current[test2.index].current.loadSaveData(test2.doodle);
        });
      }
    });

// some code to update other states
}
}, [homeworkDatasss1]);

return (
<React.Fragment>
{homeworkDatasss1 ? (
{homeworkDatasss1.length > 0 &&
homeworkDatasss1.map((course, j) => (

{course.submittedHomework.submittedHomeworkUrls.map((test, j) => (

{
valueRef2.current[j]!== undefined &&
valueRef2.current[j]!== null &&
valueRef2.current[j]?
(

<CanvasDraw

imgSrc={test.url.toString()}
hideGrid={true}
brushColor="red"
brushRadius={2}
disabled
style={{ border: "1px solid black" }}
ref={valueRef2.current[test.index]}
canvasWidth={600}
canvasHeight={600}
/>

):( null ) }

))}         
                </Col>

              </Row>

); };

export default Homework;

In this code test2.doodle is string of canvas data getting saved in other component
"const data = firstCanvas.current[Index].current.getSaveData()" .I want to dedocode this string to show doodle on images
using array ref , want to save in such a way -> valueRef2.current[test2.index].current.loadSaveData(test2.doodle);

but getting errors like "Cannot read property loadSaveData of null " OR"Cannot read property 'current' of undefined "

Is anything i am doing wrong Or Other way to do it /solve it .

[priyanka-zotalabs]

@GuillaumeAmat @laeckerv @vaneavasco