Стратегия астрогидратации `client:only="react"` не работает с реакцией js

Это мой простой реагирующий компонент, который получает котировку на стороне клиента.

// quote.tsx

import React, { useEffect, useState } from "react";

const Quote = () => {
    const [quote, setQuote] = useState("");

    async function _fetchQuote() {
        const res = await fetch('https://api.adviceslip.com/advice');
        const data = res.json();
        const quote = data['slip']['advice'];
        setQuote(quote);
    }

    useEffect(() => {
        _fetchQuote();
    }, []);

    return <h1>
        <span>Quote: </span>
        <span>{quote}</span>
    </h1>;
}

export default Quote;

Это мой компонент astro, где у меня есть базовый макет, и я хочу показать компонент реакции.

// quote-page.astro
---
import Base from "../layouts/Base.astro";
import Quote from "./components/quote";
---

<Base title = "Qutoes">
    <Quote client:only = "react" />
</Base>

Я использую client:only = "react", как сказано в документах, но, похоже, это дает мне эту ошибку

06:39:24 PM [astro] reload /src/pages/quote-page.astro
 error   Unable to render `Quote`. When using the `client:only` hydration strategy, Astro needs a hint to use the correct renderer.
  Hint:
    Did you mean to pass `client:only = "react|preact|solid-js|vue|svelte|lit"`? See https://docs.astro.build/en/reference/directives-reference/#clientonly for more information on client:only
  File:
    /home/.../src/page/quote-page.astro

Хотя я также дал значение react, похоже, оно не работает. Я пытался изменить расширение файла с quote.tsx на quote.jsx, но это не сработало.

Мой astro.config.ts выглядит следующим образом

import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap'; // https://astro.build/config

import vercel from "@astrojs/vercel/serverless";

// https://astro.build/config
export default defineConfig({
  site: "https://url",
  markdown: {
    syntaxHighlight: "prism"
  },
  integrations: [sitemap()],
  output: 'server',
  adapter: vercel(),
});

Мои зависимости в package.json

"devDependencies": {
    "astro": "^2.3.0",
    "path-browserify": "^1.0.1"
},
"dependencies": {
  "@astrojs/react": "^2.1.1",
  "@astrojs/rss": "^0.2.0",
  "@astrojs/sitemap": "^0.1.0",
  "@astrojs/vercel": "^3.2.4",
  "sass": "^1.52.1"
}