Undefined props theme when using local component library in another application, with components using ThemeProvider

I have two repository fe and craft, which are the Application and the Component library respectively.

Both repositories can compile fine on their own. However, when I try to use a component through the component library, it will not work if the component itself uses props.theme in styled-components.

Main.tsx from fe

import React from "react";
import { Button, HeadlineOne } from "handcraft";

const Page = (props: any) => {
  console.log(props.theme);

  return (
    <>
      <Button onClick={() => {}}>Sample</Button> // This causes TypeError: Cannot read property 'primary' of undefined.
      <HeadlineOne>Sample</HeadlineOne> // This is fine.
    </>
    );
   };

export default Page.

Button.tsx from craft (NOT OK, access props).

import React, { ReactNode } from "react";
import { Button as BaseButton } from "@material-ui/core";
import styled from "styled-components";
import { ButtonText } from "../Typography/Typography";

const StyledButton = styled(BaseButton)`
  text-transform: none;
  width: fit-content;
  min-height: 40px;
  background: ${(props) => props.theme.colors.primary}; // Theme props used here.
  color: ${(props) => props.theme.colors.white};

  &:hover {
    background: ${(props) => props.theme.colors.blue500};
  }
`;


...


  return (
    <StyledButton>
      <ButtonText>{children}</ButtonText>
    </StyledButton>
    );
  }
};

export default Button;

Typography.tsx from craft (OK).

import styled from "styled-components";

export const Base = styled.span`
  font-family: Manrope;
  line-height: 1.5;
`;

export const HeadlineOne = styled(Base)`
  font-weight: 200;
  font-size: 5.875rem;
  letter-spacing: -1.5px;
`;

preview.js from craft

...

addDecorator((story) => (
  <StylesProvider injectFirst>
    <ThemeProvider theme={theme}>{story()}</ThemeProvider>
  </StylesProvider>
));

App.tsx from fe

import React from "react";
import { ThemeProvider } from "styled-components";
import theme from "./utils/theme";

const App = () => (
  <ThemeProvider theme={theme}>
    <Page />
  </ThemeProvider>
);

export default App;

I get a TypeError: Cannot read property 'primary' of undefined when I try to run the main app.

package.json from fe.

"dependencies": {
    ...
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "redux": "^4.0.5",
    "styled-components": "^5.1.1",

package.json from craft (no dependencies, only devDependencies).

},
  "peerDependencies": {
    "prop-types": "^15.7.2",
    "react": "^16.8.0",
    "react-dom": "^16.8.0",
    "styled-components": "^5.1.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.5.5",
    ...

The closest I could get to solving this was the solutions here: https://github.com/styled-components/styled-components/issues/2379

I tried both peerDependencies, yarn link and they do not work. Both repos have the same theme.js and both can access the props.theme locally perfectly. Both have the same versions of styled-components.

How can I import my themed components in an external library to my application which has the same libraries and theme?