I have rendered an svg and morphed it using mouse position in vanilla javascript. Here is an example(make sure to refresh the page since it doesnt start automatically for some reason): https://codesandbox.io/s/svg-shape-change-mouse-position-sjl0z In vanilla js I did the following:

path.setAttribute("d", `M82 ${coords.y}L0 0H123V170H0L82 ${coords.y}Z`)

The problem: I can't implement the same logic in React. Whenever I add the template literals to the svg path it wont accept it. Here is my code: https://codesandbox.io/s/react-svg-shape-morph-mouse-position-r7mx9?file=/src/App.js

This react code gives me an error:

  let shape = useRef(null);
  console.log("thiss: " + shape.current);
  shape.current.setAttribute("d", `M82 ${y}L0 0H123V170H0L82 ${y}Z`);

  return (
    <div className="App">
      <svg viewBox="0 0 100% 100%" preserveAspectRatio="xMidYMid meet">
        <path ref={shape} d="M82 88L0 0H123V170H0L82 88Z" fill="lightblue" />
        {/* <path d="M82 88L0 0H123V170H0L82 ${y}Z" fill="#F9B300" /> */}
      </svg>

      <h1>{`x: ${x}; y: ${y};`}</h1>
    </div>
  );

How can I link the mouse position to the svg path shape? (ps. edited the question to include code snipets)