React useRef retorna null después de ejecutar un useEffect para llenar el estado inicial.

Estoy intentando conectar mi componente personalizado a una referencia utilizando useRef de React para poder utilizar html2canvas y renderizar el elemento en un lienzo (canvas).

const dataLetters = {
  headers: [
    'A',
    'B',
    'C',
    'D',
    'E',
    'F',
    'G'
  ],
  rows: [
    ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
  ]
};

export default function LettersPage() {
  // referencias
  const LettersTableRef = useRef(null);

  useEffect(() => {
    console.log('referencia de letters');
    console.log(LettersTableRef.current); // mismo resultado al registrar LettersTableRef
  }, [LettersTableRef]);

  return (
    <page>
      <customizedtable ref="{LettersTableRef}" data="{dataLetters}"></customizedtable>
    </page>
  );
}

Sin embargo, cuando ejecuto este código, la consola registra null después de mostrar “referencia de letters”. La tabla personalizada (CustomizedTable) simplemente toma los datos y crea filas y un encabezado según la información, sin realizar ninguna tarea más.

Soy nuevo en React y JavaScript. He leído que puedo asignar un id a un elemento en JavaScript, pero no sé cómo hacerlo en el contexto de React y estoy tratando de seguir la práctica de utilizar React dentro de React en lugar de JavaScript plano.

¡Por favor, hazme saber qué estoy haciendo mal!

—– Actualización para agregar el código de CustomizeTable —-

import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell, { tableCellClasses } from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';

export default function CustomizedTables({ data, id }) {
  return (
    <tablecontainer>
      <table>
        <tablehead>
          <tablerow>
            {data.headers.map((header) => (
              <tablecell>{header}</tablecell>
            ))}
          </tablerow>
        </tablehead>
        <tablebody>
          {data.rows.map((row) => (
            <tablerow>
              {row.map((datum) => (
                <tablecell>{datum}</tablecell>
              ))}
            </tablerow>
          ))}
        </tablebody>
      </table>
    </tablecontainer>
  );
}