React JS - trying to create a solid line with the node connectors

Where am I going wrong in my code. I am trying to rotate the nodes to a point where all the connectors line up without a break in the line. But I cant get the nodes to rotate 4 ways, they only rotate 2 ways. And I am not sure if the connector lines within the nodes are in the right spot to make them all connect without a break

my github repo

Here is my code repo - it has multiple components, store, and a css file.

The dependencies used are:

npm install classnames

npm install framer-motion

npm install zustand

npm install lucide-react