How to draw a dashed path using Framer Motion?

I’m looking to draw a dashed path using Framer Motion. The result would look like a foot path being revealed on a treasure map. A common method seems to be animating the pathLength from 0 to 1, like so:

<motion.path initial={{ pathLength: 0 }} animate={{ pathLength: 1 }} d=”…a list of coordinates” stroke=”#000″ strokeWidth=”8″ strokeDasharray=”8″ />

But when this is done, although the path animates like planned, the strokeDasharray runs wild, reading 2000px when inspected. On the other hand, when strokeDasharray is added using CSS or inline styling, the stroke is indeed dashed, but the animation doesn’t work.

After reading up on strokeDasharray, it seems the problem arises because of the initial pathLength value of 0 as it is used to compute the strokeDasharray.

Does anyone know how I could obtain the desired animation with, or without, Framer Motion? Thanks!