Trouble importing React components doing multiple import/exports – “Can’t find module”

I’m creating a POC UI library whereby I have say a component file and then also a file to demo the component in context. Think a standalone button, then a component with multiple different iterations of the button (size and colour etc).

I have created the two components in the same folder and then created an index to export them both from.

enter image description here

However, when I am attempting to import the “demo” component into the main app, it’s complaining about Cannot find module './components/form/button' or its corresponding type declarations.
I have checked the paths and they all seem to be correct, so I’m not entirely sure what is going on.

App.tsx

import ButtonDemo from './components/form/button/buttonDemo';

const App = () => (
  <>
    <ButtonDemo />
  </>
);

export default App;

It also seems that I am getting the same warning in the actual index.tsx for the main Button import…

For example, my actual component code uses default exports such as
buttonDemo.tsx

export default () => <div>Hello world</div>

I am then exporting these within the index as:
index.tsx

export {default as Button} from './button';
export {default as ButtonDemo} from './buttonDemo';

Again, these are the correct filepaths.