layoutId animations don't deform when they have to change scale

[flycran]

I have an element with rounded corners that needs to change from one position of the page to another, and it will get longer, but the animation will cause it to deform. I've tried anything I can think of and it doesn't work.

'use client'
import Button from '@/ui/Button'
import { motion, Transition } from 'motion/react'
import { useState } from 'react'

export default function Motion() {
  const [open, setOpen] = useState(false)

  const transition: Transition = {
    type: 'tween',
    duration: 2
  }

  return (
    <div className="m-auto w-300">
      <Button onClick={() => setOpen((p) => !p)}>Toggle</Button>
      <div className="mt-10">
        <div>
          <motion.div layoutId="demo" transition={transition}>
            <motion.div
              layoutId="demo1"
              transition={transition}
              className="rounded-full h-10 w-15 bg-sky-300"
            />
          </motion.div>
        </div>
        <div className="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2">
          {open && (
            <motion.div layoutId="demo" transition={transition}>
              <motion.div
                layoutId="demo1"
                transition={transition}
                className="rounded-full h-10 w-30 bg-sky-300"
              />
            </motion.div>
          )}
        </div>
      </div>
    </div>
  )
}