He renderizado un svg y lo he transformado usando la posición del mouse en javascript de vainilla. Aquí hay un ejemplo (asegúrese de actualizar la página ya que no se inicia automáticamente por alguna razón): https://codesandbox.io/s/svg-shape-change-mouse-position-sjl0z En vanilla js hice lo siguiente:

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

El problema: no puedo implementar la misma lógica en React . Cada vez que agrego los literales de plantilla a la ruta svg, no lo aceptará. Aquí está mi código : https://codesandbox.io/s/react-svg-shape-morph-mouse-position-r7mx9?file=/src/App.js

Este código de reacción me da un 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> );

¿Cómo puedo vincular la posición del mouse a la forma de la ruta svg? (ps. editó la pregunta para incluir fragmentos de código)