Images resizing only works when changing routes

[Pixelatex]

I wanted to animate an image to resize but this only seems to work when I use the player example and have it animate between routes.

Using it like this makes the images disappear and appear at the end of the animation, the div container animates correctly though, it only seems to be an issue with images. Also the image type makes no impact whatsoever, png, svg, jpg, etc... none animate correctly.

App.js

import React, { Component, useState, useEffect } from "react";
import { createGlobalStyle } from "styled-components";
import { useMorph, useMorphKeys, presets } from "react-morph";
import { BrowserRouter as Router, Route } from "react-router-dom";

import "mapbox-gl/dist/mapbox-gl.css";
import { Container } from "./App.style";
import Header from "./components/Header";
import Map from "./components/Map";
import LoadingScreen from "./views/LoadingScreen";
const GlobalStyle = createGlobalStyle`
  html {
    height: 100%;
    width: 100%;
  }
  body {
    height: 100%;
    margin: 0;
    width: 100%;
    & #root {
      height: 100%;
      width: 100%;
    }
  }
`;

function App() {
  const [loaded, setLoaded] = useState(false);
  const morph = useMorph();
  const morphs = useMorphKeys(["logo", "container"]);

   return (
    <Container onClick={() => setLoaded(!loaded)}>
        <GlobalStyle />
        {!loaded ? <LoadingScreen morphs={morphs} /> : <Header morphs={morphs} />}
    </Container>
  );
}

export default App;

Loadingscreen:

import React from "react";
import logo from "../../assets/logo.png";
import { Container, Logo } from "./loadingScreen.style";

const LoadingScreen = ({ morphs }) => (
  <Container {...morphs.container}>
    <img {...morphs.logo} src={logo} />
  </Container>
);

export default LoadingScreen;

Header:

import React from "react";
import logo from "../../assets/logo.png";
import { HeaderContainer, Logo, Menu, Icon, MobileMenu } from "./header.style";
import doIcon from "../../assets/icons/do.svg";
import drinkIcon from "../../assets/icons/drink.svg";
import eatIcon from "../../assets/icons/eat.svg";
import seeIcon from "../../assets/icons/see.svg";

const Header = ({ morphs }) => (
  <HeaderContainer {...morphs.container}>
    <img {...morphs.logo} src={logo} />
    <Menu>
      <Icon icon={drinkIcon} />
      <Icon icon={eatIcon} />
      <Icon icon={seeIcon} />
      <Icon icon={doIcon} />
    </Menu>
    <MobileMenu>
      <Icon icon={drinkIcon} />
    </MobileMenu>
  </HeaderContainer>
);

export default Header;