astro react component prop type

src/components/Counter.tsx:

import { useState } from "react";

interface CounterProps {
	count: number;
}

export const Counter = ({ count }: CounterProps) => {
	const [counter, setCounter] = useState(count);
	return (
		<div>
			<button
				onClick={() => {
					setCounter(counter - 1);
				}}
				type="button"
			>
				-
			</button>
			{counter}
			<button
				onClick={() => {
					setCounter(counter + 1);
				}}
				type="button"
			>
				+
			</button>
		</div>
	);
};

src/content/docs/test.mdx:

---
title: testing page.
---

import { Counter } from "../../components/Counter"

<Counter client:visible />
<Counter client:visible count={10} />