Animation Problem with Framer Motion and LayoutGroup - reactjs

Question

strong textI'm trying to make a Pokedex App with an animation when we click on a card.
I have a Component PokemonList who render PokemonCard.
When i click on PokemonCard, I navigate to /{pokemonName} and an detail component shows up with an animation.
The Detail component is rendered with of React router
My PokemonCard and my PokemonView (Detail pannel) are in the same Framer Motion LayoutGroup. My cards have the layoutId card-${pokemonInfo.name} and my PokemonView have too. On the opening, i fetch current pokemon with the location.pathname and fill detail pannel with infos.
PokemonView.ts
import { LayoutGroup, motion } from "framer-motion"
import { useLocation, useNavigate } from "react-router-dom"
import styled from "styled-components"
import { colours } from "../../data/typeColors"
import { hexToRgb } from "../../helpers/hexToRgb"
import { useDisableScroll } from "../../hooks/useDisableScroll"
import {
useGetPokemonInfoQuery,
useGetPokemonSpeciesInfoQuery,
} from "../../redux/api/api"
import PokemonInfoPannel from "./PokemonInfoPannel"
import ViewTab from "./Tabs/ViewTab"
const PokemonViewContainer = styled.div`
height: 100%;
width: 100vw;
background-color: ${(props: { background: string }) =>
hexToRgb(props.background, 0.5)};
position: fixed;
top: 0;
display: flex;
justify-content: center;
align-items: center;
`
const PokemonViewStyle = styled(motion.div)`
background-color: ${(props: { background: string }) => props.background};
height: 100%;
width: 100%;
min-height: 680px;
max-width: 600px;
max-height: 800px;
overflow: hidden;
opacity: 1;
#media (min-width: 600px) {
border-radius: 2rem;
box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.5);
}
#media (max-width: 600px) {
max-height: 100vh;
}
`
const PokemonView = () => {
console.log("PokemonView")
const navigate = useNavigate()
useDisableScroll()
const location = useLocation()
const { data: pokemonInfo } = useGetPokemonInfoQuery(
location.pathname.split("/")[1]
)
const { data: pokemonSpeciesInfo } = useGetPokemonSpeciesInfoQuery(
location.pathname.split("/")[1]
)
return (
<>
<PokemonViewContainer
id="pokemon-view-container"
background={colours[pokemonInfo!.type[0]].background}
onClick={(e) => {
navigate("/")
}}
>
<LayoutGroup id="card-swap-animation">
<PokemonViewStyle
layoutId={`card-${pokemonInfo.name}`}
id="pokemon-view"
background={colours[pokemonInfo!.type[0]].background}
onClick={(e) => {
e.stopPropagation()
}}
>
{/* <PokemonInfoPannel
pokemonDetailed={{
info: pokemonInfo!,
speciesInfo: pokemonSpeciesInfo!,
}}
></PokemonInfoPannel>
<ViewTab
pokemonDetailed={{
info: pokemonInfo!,
speciesInfo: pokemonSpeciesInfo!,
}}
></ViewTab> */}
</PokemonViewStyle>
</LayoutGroup>
</PokemonViewContainer>
</>
)
}
export default PokemonView
With this I have the correct behavior. But, I have some typescript errors because my pokemonInfo and pokemonSpeciesInfo can be undefined (i fill them via RTK-Query).
So, I decided to add this before the return
if (!pokemonInfo || !pokemonSpeciesInfo) {
return null
}
But with this line, the first time i click on a card the animation doesn't work. I close detail pannel, open it again and the animation works.
Another think that I don't understand is that when I do that
const { data: pokemonInfo } = useGetPokemonInfoQuery(
location.pathname.split("/")[1]
)
console.log(pokemonInfo)
const { data: pokemonSpeciesInfo } = useGetPokemonSpeciesInfoQuery(
location.pathname.split("/")[1]
)
console.log(pokemonSpeciesInfo)
I see that the first request is never undefined but the second is always, then became fullfilled. I don't know if this is the problem.
Someone can help me ?
Thanks in advance
The source code is here : https://github.com/RomainHoffmann/Pokedex
UPDATE :
I understood why the first console was never null. It's because I do this request on my PokemonCard component, so the response is cached by RTK Query.
To fix my problem, I add the other query in my Card component, it works but I call it "in the void".
I have understand now thats returning <></> in the first render makes the problem but how could I do to avoid Typescript errors and render the component only when datas are fullfiled ?