Coloca uns prints mostrando que resolveu e principalmente que não impactou outras resoluções.

Lgtm

Analisando bem... Não precisaria nem mesmo o useEffect com os listeners, apenas o cálculo do "vh custom" no topo do arquivo fora da "declaração do componente", pois na prática, o usuário não vai redimensionar a página no smartphone. Fiz alguns testes locais aqui e funcionaram normalmente (desktop e mobile), você pode alterar e fazer mais uns testes locais também, quanto menos a necessidade de useEffect melhor., resolvido dessa forma mesmo com Tailwind:

document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);

const UpdateShelter = () => {
// ...

  return (
    <div className="flex flex-col items-center h-[calc(var(--vh,1vh)*100)] md:h-screen">

// ...

Para telas maiores que 768 (md), pega o vh completo, abaixo disso, ele calcula.

Por essa abordagem tem uma nível de compatibilidade bem maior que o dvh, uma vez que ele calcula a propriedade apenas no "primeiro load" da aplicação e usa a unidade px, PR apto ao merge.

Perfeitooo