How to fix 'Cannot read properties of null' error while importing react based Node package in next.js and using babel, webpack?

Question

I am creating a node package with a react module in it. I am using babel and webpack to compile it. When I import my package into my react app, I get the error:

Uncaught TypeError: Cannot read properties of null (reading 'useState')
    at e.useState (webpack-internal:///../drag.js/dist/bundle.js:2:13456)
    at j (webpack-internal:///../drag.js/dist/bundle.js:2:18123)
    at renderWithHooks (file://D:\Code\drag.js\test\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5658:16)

This error originates from the package I have created and I am not sure why it doesn't know what React is. Without the useStates in my package it works just fine.

Here is the component in the package:

import React, { useState } from "react";

import flow from "flow.scss";
import styles from "./Drag.module.scss";

const Drag = ({ elements, setElements }) => {
    // States
    const [draggedElement, setDraggedElement] = useState(null);
    const [draggedOverlap, setDraggedOverlap] = useState(null);

    // Handlers

    // Handle dragging an element.
    const handleDragStart = (e) => {};
    const handleDrag = (e) => {};
    const handleDragEnd = (e) => {};
    const handleDrop = (e) => {};

    // Handle when an element is dragged over another element.
    const handleDragEnter = (e) => {};
    const handleDragOver = (e) => {};
    const handleDragLeave = (e) => {};

    // Handle updating/sorting array.
    const handleUpdateElements = () => {};

    return (
        <div className={`${styles["drag-parent"]} flex column gap padding`}>
            {elements &&
                elements.map((child, index) => {
                    return (
                        <div
                            className={`${styles["drag-child"]} flex column padding`}
                            key={index}
                            onDrag={handleDrag} // This element is being dragged.
                            onDragEnd={handleDragEnd} // This element stops being dragged.
                            onDragEnter={handleDragEnter} // A dragged item overlaps this element.
                            onDragLeave={handleDragLeave} // A dragged item leaves this element.
                            onDragOver={handleDragOver} // While an item is being dragged over this element.
                            onDragStart={handleDragStart} // This element starts being dragged.
                            onDrop={handleDrop} // An item is dropped on a valid target.
                        >
                            <div className={`${styles["drag-handle"]}`}></div>
                            {child}
                        </div>
                    );
                })}
        </div>
    );
};

export default Drag;

Here is the .babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Here is the webpack.config.js:

const path = require("path");

module.exports = {
    mode: "production",
    entry: "./src/Drag.jsx",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
        libraryTarget: "umd",
        library: "Drag",
        libraryExport: "default",
        globalObject: "this",
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"],
                    },
                },
            },
            {
                test: /\.s[ac]ss$/i,
                use: ["style-loader", "css-loader", "sass-loader"],
            },
        ],
    },
    resolve: {
        extensions: [".js", ".jsx"],
        alias: {
            react: path.resolve("./node_modules/react"),
        },
    },
};

Both the package and my app use react 18.2.0, the app itself is using next.js as well.

Packages package.json:

{
    "name": "drag.jsx",
    "version": "1.0.0",
    "description": "",
    "main": "dist/bundle.js",
    "scripts": {
        "build": "webpack --config webpack.config.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "flow.scss": "^1.0.2",
        "react-icons": "^4.8.0",
        "sass": "^1.62.1"
    },
    "peerDependencies": {
        "react": "^18.2.0"
    },
    "devDependencies": {
        "@babel/core": "^7.21.8",
        "@babel/preset-env": "^7.21.5",
        "@babel/preset-react": "^7.18.6",
        "babel": "^6.23.0",
        "babel-loader": "^9.1.2",
        "css-loader": "^6.7.3",
        "sass-loader": "^13.2.2",
        "style-loader": "^3.3.2",
        "webpack": "^5.83.1",
        "webpack-cli": "^5.1.1"
    }
}

If I need to provide anything else, please let me know.

UPDATE: After adding

externals: {
        react: "react",
    },

to my webpack.config.js file, several errors pop-up alongside the original:

Warning: 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
 4. ...

(the only hooks called in my function are indeed within the body of the function component. I'm assuming this is a red herring due to an issue with the compiling.)

Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.