Shared element with placement shifting with 'modal'

Hey, I'm using shared elements between multiple different screens. But If I try to use shared elements pushing in to a modal type screen('presentation: 'modal'), the transition between screens the animation is a bit off and then skips into the correct position.
Please see video.

https://user-images.githubusercontent.com/32518962/218247061-673023a0-d21a-4cab-8331-ed5f5a92f88d.mov

```js
//Stack

{
return [
{
id: `sharedbutton`,
animation: 'fade',
},
];
}}
component={Charity}
/>
{
return [
{
id: `sharedbutton`,
animation: 'fade',
resize: 'auto',
},
];
}}
options={{
headerShown: false,
animationEnabled: true,
presentation:'modal'
}}
name="Checkout"
component={Checkout}
/>

```

```js
//Component 1

export const Checkout = ({}: Props) => {
return (

... more code






);
};
```

```js
//Component 2

export const Checkout = ({}: Props) => {
return (

... more code






);
};
```

Start by reproducing the transition from Charity to Checkout using the shown Stack.Navigator configuration, presentation: 'modal', and sharedElements id 'sharedbutton'. Compare the placement during the transition with the final position in the two SharedElement components; done means the shared element reaches the correct position without shifting or skipping.

Written by the indexing model from the issue text.