React NPM library with rollup won't work when using dependencies and linking locally

Question

I'm quite new to making NPM libraries and using Rollup.

I have the following rollup.config.js:

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import { nodeResolve } from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import generatePackageJson from "rollup-plugin-generate-package-json";
import { terser } from "rollup-plugin-terser";
const packageJson = require("./package.json");

const plugins = [
  // peerDepsExternal(),
  nodeResolve({ browser: true }),
  commonjs(),
  typescript({
    tsconfig: "./tsconfig.json",
    useTsconfigDeclarationDir: true,
  }),
  // terser(), -> commenting this out so I can read the build code
];

const folders = ["components", "engine"];
const folderBuilds = folders.map((folder) => {
  return {
    input: `src/${folder}/index.ts`,
    output: {
      file: `dist/${folder}/index.js`,
      sourcemap: true,
      exports: "named",
      format: "esm",
    },
    plugins: [
      ...plugins,
      generatePackageJson({
        baseContents: {
          name: `${packageJson.name}/${folder}`,
          private: true,
          main: "../cjs/index.js", // --> points to cjs format entry point of whole library
          module: "./index.js", // --> points to esm format entry point of individual component
          types: "./index.d.ts",
        },
      }),
    ],
  };
});

export default [
  {
    input: "src/index.ts",
    output: [
      {
        file: packageJson.main,
        format: "cjs",
        sourcemap: true,
        exports: "named",
      },
      {
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
        exports: "named",
      },
    ],
    plugins,
  },
  ...folderBuilds,
];

The folderBuilds part is to allow for subpath imports like react-chess-engine/components.

I've created a testing folder inside the project directory (outside of src) which is create-react-app app to test the components in the library. I've linked the library with: "react-chess-engine": "link:../dist".

However, whenever I use any dependency code in my component, it won't render in the testing app.

For example, if the component looks like this (React dependency code commented out):

import React from "react";

export type ChessBoardProps = {
  size?: string | number;
  position?: string;
};


const ChessBoard: React.FC<ChessBoardProps> = ({ 
  size = "90vh",
  position,
}) => {

  // const [counter, setCounter] = React.useState(0);

  return (
    <div>
      hello world
    </div>
  );
};

export default ChessBoard;

The hello world is rendered.

However, if the component looks like this:

import React from "react";

export type ChessBoardProps = {
  size?: string | number;
  position?: string;
};


const ChessBoard: React.FC<ChessBoardProps> = ({ 
  size = "90vh",
  position,
}) => {

  const [counter, setCounter] = React.useState(0);

  return (
    <div>
      hello world
    </div>
  );
};

export default ChessBoard;

It will no longer render. As in, the div does not get rendered at all but I don't get any errors with the import or with React.

The same thing is happening if I try to use any other dependencies in the component as well such as styled-components. However, I can see that the React code is being added to my dist code files.