How to symlink react components

Question

I'm trying to share some react components across multiple projects in an easy way. If I symlink the .tsx file into my web folder, node compiler fails with this error:

@parcel/core: Failed to resolve 'react/jsx-dev-runtime' from '/Users/mahdi/dev/temp/components/Hello.tsx'

Is there a way to fix this?

P.S. I tried to use yarn link but it fails with some errors about conflict due to having multiple instances of React.

P.S. 2: Hello.tsx is a very simple and minimal component:

import * as React from "react";
import { useState } from "react";

export const Hello = () => {
    const [x11, setX11] = useState(0);
    return <div onClick={() => setX11(x11 + 1)}>hello4412!{x11}</div>;
};