Fast Refresh not working with hooks returning JSX/TSX

Describe the bug

We are frequently using custom hooks that will return rendering callbacks in which we refer to actual tsx components.

Is this a bug, or is there any alternative for defining component-based hooks which doesn't break HMR?

Reproduction

https://stackblitz.com/edit/vitejs-vite-zzqhfn?file=src%2Fhook.jsx

Steps to reproduce

A simple example:

hook.tsx

import { useCallback } from "react";

export const useExampleHook = () => {
    return useCallback(() => <span>Test</span>, []);
}

If you use this hook in a component, and then modify the hook's source code, the following will be printed in the console:

5:03:45 PM [vite] hmr invalidate /src/hook.tsx Could not Fast Refresh. Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports

System Info

Linux Mint, Firefox, Vite 5.2.11, latest vite react plugin

Used Package Manager

npm

Logs

No response

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a Vite issue and not a framework-specific issue.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

vitejs / vite-plugin-react

Fast Refresh not working with hooks returning JSX/TSX #354