SVG rotate="auto" is not behaving as predicted

I am attempting to animate a sprout growing. The plan is that the leaves should follow the path of the stem (illustrated with a dotted line). This is now working (with a little trial and error). However, I would like the leaves to rotate (from bottom-center) along with the path (ideally, growing as they move).

When I set rotate to "auto", the result is not what I would have predicted.

<svg width="150" height="150" viewBox="0 0 150 150">
  <path fill="none" stroke="black" stroke-width="1px" stroke-dasharray="5" id="stem" d="m 29.7,149.1
c 0.3,-1 1.7,-8.6 -0.7,-20.1 -4.3,-20.6 -5.7,-48.9 42.1,-52"/>
  <path id="leaves" d="M 8.5,132.8
C 14.3,133 16.4,132.5 19.9,135.4 23.2,138.2 29.6,144.2 28.5,148.6
L 29.6,149 30.4,149.2
C 32.6,144.2 35.2,140.7 39.3,137.4 43.7,133.9 49.6,133.2 56.9,133.1 56.9,133.1 47.1,126.3 39.5,129.3 31.1,132.8 33.8,138.4 29.7,148.4 29.6,143.6 27.9,132 22.8,130 16.5,127.5 8.5,132.7 8.5,132.7
Z">
      <animateMotion
        dur="1s"
        repeatCount="1"
        rotate="auto"
        begin="leaves.click" fill="freeze" path="M 0,0
C 0.3,-1 1.7,-8.6 -0.7,-20.1 -5,-40.7 -6.4,-69 41.400002,-72.1"/>
</path>
</svg>

I assumed there may be issues with the path, so I have tried using relative and absolute paths, but both give the same result.

Solution

Altered all paths with: https://yqnn.github.io/svg-path-editor/#

multiply by 10 to get rid of .n decimal notation but keep accuracy
made all paths relative notation
increased viewBox by 10
changed leaves so the "stem" originates at 0,0 origin
!! this is important to get the rotate animation at the correct location
Requires the d-path to start at m160 -210 because the leaves start to draw from a leave... not the stem
rotated the leaves an extra 90 degrees, so they point over the x-axis (animation direction)
changed viewBox so the whole animation is visible
visibility trick to prevent a FOUC on the leaves (now initially drawn at 0,0 origin)

<svg width="150" viewBox="-200 -200 1200 1200" style="background:pink">
  <path id="stem" fill="none" 
        stroke="black" stroke-width="5px" stroke-dasharray="50" 
        d="m297 750c3-10 17-86-7-201-43-206-57-489 421-520"/>
  <path id="leaves" visibility="hidden" fill="green"
        d="m160-210c-2 58 3 79-26 114-28 33-88 97-132 86l-4 11-2 8
           c50 22 85 48 118 89 35 44 42 103 43 176 0 0 68-98 38-174-35
           -84-91-57-191-98 48-1 164-18 184-69 25-63-27-143-27-143z">
    <set attributeName="visibility" from="hidden" to="visible" begin=".01s" />
    <animateMotion begin="0s" dur="3s"
                   rotate="auto" repeatCount="indefinite" fill="freeze">
       <mpath href="#stem"/>
    </animateMotion>
  </path>
</svg>