I have the following code in a component file calle appVersion.tsx

import { useEffect, useState } from 'react';

export function AppVersion() {
  const [version, setVersion] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    async function fetchVersion() {
      try {
        const res = await fetch("/api/version");
        const data = await res.json();
        setVersion(data.version);
      } catch (error) {
        console.error('Error fetching version:', error);
        setError('Failed to fetch version');
      }
    }

    fetchVersion();
  }, []);

  return ({version && <div>v{version}</div>});
}

That should run without issue, I thought, but there is an issue with that return statement that I cannot figure out what. The application fails to compile.

I have attached screenshots to encapsulate the entire error I am getting.