I'm getting an undefined reading of url and other product.{items} when I reload the browser to run this piece of code.

 const location = useLocation();
    const id = location.pathname.split('/')[2];
    const [product, setProduct] = useState([]);

    useEffect(() => {
        const fetchProduct = async ()=>{
            try{
                const res = await commerce.products.retrieve(id);
                setProduct(res);
            }catch{}
        };
        fetchProduct();
    },[id]);


  return (
    <Container>
        <Wrapper>
            <ImgContainer>
               <Image src={product.image.url}/>
            </ImgContainer>
            <InfoContainer>
                <Title>{product.name}</Title>                
            </InfoContainer>
        </Wrapper>
    </Container>
  )
}