i have three components. one draws a circle, one draws a line and one is their container. in container, i use props to give coordination for circles. i want to use that coordination (two cx and two cy ) in my other component to draw a line between them. is there a way that i can pass id of my points to my line component and use their x and y values (like get attribute in Javascript)? here is my code for better understanding

point component

import React from 'react';

const Point = ({ p_cx, p_cy, id }) => {
  return (
    <>
      <circle cx={`${p_cx}`} cy={`${p_cy}`} r={5} fill='white' id={`${id}`} />
    </>
  );
};

export default Point;

line component

import React from 'react';

const Line = ({ L_x1, L_y1, L_x2, L_y2, id1 }) => {
  return (
    <>
      <path
        d={
          'M' + `${L_x1}` + ' ' + `${L_y1}` + 'L' + `${L_x2}` + ' ' + `${L_y2}`
        }
        stroke='green'
        fill='red'
        strokeWidth={5}
        id={`${id1}`}
      />
    </>
  );
};

export default Line;

container

import React from 'react';
import Line from './line';
import Point from './points';

const Pointsdraw = () => {
  return (
    <svg>
      <g>
        <Point p_cx={20} p_cy={50} id={'abcd'} />
        <Point p_cx={10} p_cy={60} id={'aaa'} />
      </g>
      <g>
        <Line />
      </g>
    </svg>
  );
};

export default Pointsdraw;