How to seamlessly import typescript from internal sibling packages?

Question

I'm trying to create a new web project that consists of 3 npm packages: 2 UI packages, and 1 shared code package. All 3 packages are REACT + TS vite packages.

I am trying to set this up using npm / yarn workspaces

The problem is, every time I've tried to do this in the past, I've experienced import problems - either I couldn't import typescript entities, such as types and interfaces, or I had syntax errors because the pipeline was trying to doubly transpile from TS.

The end goal is simply to be able to do write code like this, which seamlessly imports both javascript and typescript entities from anywhere within sibling packages:

// File: packages/ui1/components/home.tsx

import { DataGridInterface, createDataGrid } from 'common/componnets/dataGrid/dataGrid';
import { ButtonProps, Button } from 'common/componnets/button/button';

function Home() {
    // ...
}

I feel that this should be something that is easy to do, but I've spent many hours on it in the past. Or is it 100% necessary and expected that I always compile to plain javascript before importing from a sibling package in a workspace?