How to take benefit of Image component from Next.js and framer-motion svg animation

Question

I have a Next.js project, where I am using framer-motion for some animations. I have the following code where using framer-motion I animated an svg:

function TestPic() {
  return (
    <motion.svg width="80" height="50" viewBox="50 220 480 350" fill="none">
      <motion.path
        d="M57.13,405.5c0-12.17,23.59-42.58,23.59-42.58l20.31,100.24l44.55-155.92l19.65,134.3l31.45-71.41l11.79,71.41
      l24.9-78.62l20.31,102.86l29.48-100.89l30.79,95l18.34-102.86l26.86,85.17l30.14-74.03l20.96,60.27l28.17-110.06l19.65,161.16
      c0,0,28.83-61.19,28.83-83.2"
        stroke="#B2441D"
        stroke-width="20"
        initial={{ pathLength: 0, fill: 'none', opacity: 0 }}
        animate={{ pathLength: 1, fill: '695A69', opacity: 1 }}
        transition={{ duration: 2 }}
      />
    </motion.svg>
  );
}

export default TestPic;

The animation works perfect, but now I need to somehow use the Image component from 'next/image', and give it the src of my animation. Something like this:

import TestPic from './components/TestPic/testPic.js';
import Image from 'next/image';

function Test() {
return <div><Image src={TestPic}/></div>;

Is this possible? Or is there another option for this usecase?