weird issues when using styled-component in npm packages - reactjs

Question

I'm trying to create a npm package - a UI component.
Let's say I have a project called fancy-web, and the npm package called fancy-components.
In fancy-web, I include in package.json
"fancy-components": "^0.0.1"
( In other words, fancy-web will consume fancy-components ).
In fancy-web, I have
// ...
import { ThemeProvider } from 'styled-components';
import { Testing } from 'fancy-components';
// ...
return (
<ThemeProvider theme={theme}>
<Testing />
</ThemeProvider>
)
The problem is here
In my fancy-components Testing component, if I'm doing
If I'm doing something trivial like this in the Testing component, I will get an error
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
---
import React from 'react';
import styled from 'styled-components';
const Container = styled.div`
margin-top: 40px;
`;
function Testing(props: Props): JSX.Element {
return (
<Container>
<div>Testing</div>
</Container>
);
}
export default Testing;
However, the following works if my "Testing" component just like that.
The following is the `Testing` code
---
import React from 'react';
import styled from 'styled-components';
function Testing(props: Props): JSX.Element {
return (
<div>Testing</div>
);
}
export default Testing;
Not sure what is wrong here and really appreciated of any help.

Answer 1

It turns out because I'm doing linking which cause the issues. After I push it out instead of doing linking, everything works fine.