Change the dur attribute of an animation in index.js

[ekurgan]

Hello,

I try to change the dur attribute of an animation with javascript but without success...

In my code below the idea is to change the dur attribute of animateTransform id "ballAnimation2"

<svg>    
<defs>
  <symbol id="ballSymbol">
    <g id="ballGroup" transform="translate(92%,92%)" pointer-events="visible" >
      <animateTransform id="ballAnimation1" attributeType="translate" from="92%,92%" to="92%,8%" dur="2" begin="click"  />
      <animateTransform id="ballAnimation2" attributeType="translate" from="92%,8%" to="92%,92%"  dur="2" begin="click+2"  />
      <circle cx="0" cy="0" r="7%" fill="white"/>

    </g>
  </symbol>
</defs>

<use id="ball"  href="#ballSymbol"/>
  
  
</svg>

const ball = document.getElementById("ball");
const ballAnimation1 = ball.getElementById("ballAnimation1");
const ballAnimation2 = ball.getElementById("ballAnimation2");

ballAnimation2.dur="20"; 
ball.animate("click");

 What do I do wrong ??