Могу ли я ссылаться / обновлять Canvas из дочерней служебной функции, которая находится на 2-м уровне иерархии ReactJs / ReactJS Hook

Question

Я пытаюсь получить доступ к элементу canvas из дочерней функции, которая является второй в иерархии. Например, у меня есть компонент приложения, который является компонентом функции. Я создал UseRef и создал контекст для компонента Canvas. Я пытаюсь получить доступ к служебной функции "rbgGraph" из useEffect. «rbgGraph» имеет сложную логику c для определения пикселей и цветов для заполнения Canvas, а логи c записаны в других служебных функциях, импортированных в «rbgGraph» (addPixel). Я пытаюсь понять, как я могу заполнить холст требуемым цветом в нужном пикселе.

Приложение. js

import React from 'react';
import { useEffect } from 'react';
 import { useRef } from 'react';
import {rbgGraph} from './Utilities/rbgGraph'


export default function App() {
    let ref = useRef();

     useEffect(() => {
           let canvas = ref.current;
          let context = canvas.getContext('2d');
         rbgGraph(context);
       });

         return (
             <canvas
                 ref={ref} 
                 style={{ width: '100px', height: '100px' }}
             />
         );

}

rbgGraph . js

import {addPixel} from './addPixel'

export function rbgGraph (context) {



  var  pixels = [];
   var colors = []; 
   .
   .
   .
   .
   .
   .
   .
  addPixel(pixel,pixels,pixelsIn);

addPixel. js

      export const addPixel = (pixel,pixels,pixelsIn) => {
            pixels.push(pixel);
            pixelsIn[pixel.getX() + "x" + pixel.getY() ] = 1;
            var color = pixel.getColor();

    //I am looking for this part of manipulation to the Canvas

/* context.fillStyle = "rgb("+color.getRed()+","+color.getBlue()+","+color.getGreen()+")";
            context.fillRect( pixel.getX(), pixel.getY(), 1, 1);

*/

    }

Можете ли вы предложить любые возможные способы управления элементами Canvas из addPixel. js