Connecting Lines Between Selected Boxes in React Component Not Display

//still not working could  you check the code


import React, { useState, useLayoutEffect, useRef } from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Radio from '@mui/material/Radio';
import FormControlLabel from '@mui/material/FormControlLabel';
import RadioGroup from '@mui/material/RadioGroup';
import Button from '@mui/material/Button';

const theme = createTheme({
	palette: {
		primary: {
			main: '#1976d2'
		}
	}
});

const UI_OPTIONS_LEFT = [ 'Protopie', 'Unity', 'QT', 'Figma' ];
const UI_OPTIONS_RIGHT = [ 'VRED', 'Unreal Engine' ];

export default function Flowchart() {
	const [ leftSelected, setLeftSelected ] = useState('');
	const [ rightSelected, setRightSelected ] = useState('');
	const [ isConnectEnabled, setIsConnectEnabled ] = useState(false);
	const [ showConnector, setShowConnector ] = useState(false);
	const [ connectorPosition, setConnectorPosition ] = useState({ x1: 0, y1: 0, x2: 0, y2: 0 });
	const connectorRef = useRef(null);

	useLayoutEffect(
		() => {
			setIsConnectEnabled(!!leftSelected && !!rightSelected);
		},
		[ leftSelected, rightSelected ]
	);

	const handleLeftChange = (event) => {
		setLeftSelected(event.target.value);
	};

	const handleRightChange = (event) => {
		setRightSelected(event.target.value);
	};

	const handleConnectClick = () => {
		if (isConnectEnabled) {
			const leftBox = document.querySelector(`#left-${leftSelected.replace(/\s+/g, '-')}`);
			const rightBox = document.querySelector(`#right-${rightSelected.replace(/\s+/g, '-')}`);

			if (leftBox && rightBox) {
				const leftBoxRect = leftBox.getBoundingClientRect();
				const rightBoxRect = rightBox.getBoundingClientRect();
				const containerRect = document.querySelector('#connector-container').getBoundingClientRect();

				const x1 = leftBoxRect.right - containerRect.left;
				const y1 = leftBoxRect.top + leftBoxRect.height / 2 - containerRect.top;
				const x2 = rightBoxRect.left - containerRect.left;
				const y2 = rightBoxRect.top + rightBoxRect.height / 2 - containerRect.top;

				setConnectorPosition({ x1, y1, x2, y2 });
				setShowConnector(true);
			}
		}
	};

	return (
		
			
				
					Select UI Flow
				
				
					
					
					{showConnector && (
						
					)}
				
				
					Connect
				
			
		
	);
}

function OptionsBox({ options, selected, onChange, idPrefix, alignRight }) {
	return (
		
			
				{options.map((name) => (
					
						}
							label=""
							id={`${idPrefix}${name.replace(/\s+/g, '-')}`}
							sx={{ marginRight: 2 }}
							style={{ alignItems: alignRight ? 'flex-end' : 'flex-start' }}
						/>
						
							{name}
						
					
				))}
			
		
	);
}

const ConnectorLine = React.forwardRef(({ x1, y1, x2, y2 }, ref) => {
	return (
		
	);
});

import React, { useState, useEffect, useRef } from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Radio from '@mui/material/Radio';
import FormControlLabel from '@mui/material/FormControlLabel';
import RadioGroup from '@mui/material/RadioGroup';
import Button from '@mui/material/Button';

const UI_OPTIONS_LEFT = ['A', 'B', 'C', 'D'];
const UI_OPTIONS_RIGHT = ['1', '2', '3', '4'];

export default function Flowchart() {
  const [leftSelected, setLeftSelected] = useState('');
  const [rightSelected, setRightSelected] = useState('');
  const [isConnectEnabled, setIsConnectEnabled] = useState(false);
  const [showConnector, setShowConnector] = useState(false);
  const [connectorPosition, setConnectorPosition] = useState({ x1: 0, y1: 0, x2: 0, y2: 0 });
  const connectorRef = useRef(null);

  useEffect(() => {
    setIsConnectEnabled(!!leftSelected && !!rightSelected);
  }, [leftSelected, rightSelected]);

  const handleLeftChange = (event) => {
    setLeftSelected(event.target.value);
  };

  const handleRightChange = (event) => {
    setRightSelected(event.target.value);
  };

  const handleConnectClick = () => {
    if (isConnectEnabled) {
      const leftIndex = UI_OPTIONS_LEFT.indexOf(leftSelected);
      const rightIndex = UI_OPTIONS_RIGHT.indexOf(rightSelected);

      const leftBox = document.querySelector(`#left-${leftSelected}`);
      const rightBox = document.querySelector(`#right-${rightSelected}`);

      if (leftBox && rightBox) {
        const leftBoxRect = leftBox.getBoundingClientRect();
        const rightBoxRect = rightBox.getBoundingClientRect();

        const x1 = leftBoxRect.right; // Adjust x1 to touch the right side edge of the left box
        const y1 = leftBoxRect.top + leftBoxRect.height / 2;
        const x2 = rightBoxRect.left; // Adjust x2 to touch the left side edge of the right box
        const y2 = rightBoxRect.top + rightBoxRect.height / 2;

        setConnectorPosition({ x1, y1, x2, y2 });
        setShowConnector(true);
      }
    }
  };

  return (
    
      
        Select UI Flow
      
      
        
        
        {showConnector && (
          
        )}
      
      
        Connect
      
    
  );
}

function OptionsBox({ options, selected, onChange, idPrefix }) {
  return (
    
      
        {options.map((name) => (
          
            }
              label=""
              id={`${idPrefix}${name}`}
              sx={{ marginRight: 2 }}
            />
            
              {name}
            
          
        ))}
      
    
  );
}

const ConnectorLine = React.forwardRef(({ x1, y1, x2, y2 }, ref) => {
  return (
    
  );
});