Can't resolve react in formik/dist - custom webpack config

Learning to configure projects from scratch but for some reason webpack can't seem to resolve formik's modules - other 3rd party modules work fine e.g styled-components. Tried to google this but couldn't find anything on this issue and I'm not really sure what I'm looking for anyway. Would greatly appreciate any ideas what might be the cause of this. Thanks!

ERROR in ../node_modules/formik/dist/formik.esm.js
Module not found: Error: Can't resolve 'react' in 'app/node_modules/formik/dist'
 @ ../node_modules/formik/dist/formik.esm.js 1:0-189 93:9-17 250:0-13 254:15-25 361:22-28 362:22-28 363:23-29 364:22-28 365:18-24 366:22-28 367:2-11 373:2-11 380:26-36 392:27-38 418:28-39 443:38-49 448:33-44 472:26-37 541:2-11 546:18-29 583:2-11 588:2-11 594:2-11 603:2-11 612:2-11 684:22-33 690:24-35 701:18-29 715:22-33 735:22-33 804:20-31 834:23-34 849:18-29 855:22-33 984:21-32 994:24-35 1007:22-33 1042:14-21 1045:16-23 1092:2-21 1095:2-11 1101:9-22 1103:17-30 1104:78-86 1270:162-177 1270:180-189 1273:12-18 1278:9-20 1301:2-11 1334:2-11 1346:2-11 1381:13-26 1387:11-24 1400:11-24 1405:9-22 1410:0-10 1422:9-22 1487:17-30 1499:15-28 1512:6-15 1527:11-24 1529:13-26 1827:23-36 1828:86-94 1832:2-11 1871:156-169 1875:2-11 1994:15-28 2000:13-26 2013:13-26 2018:11-24 2022:2-11

@tsconfig

{
  "compilerOptions": {
    "baseUrl": "src",
    "module": "esnext",
    "target": "ES6",
    "sourceMap": true,
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "jsx": "react",
    "lib": [
      "esnext",
      "dom"
    ],
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "skipLibCheck": true,
    "strict": true,
    "experimentalDecorators": true,
    "alwaysStrict": true,
  },
  "exclude": [
    "node_modules/*"
  ],
}

@webpack.config

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin')
const webpackMerge = require('webpack-merge')
const loadPresets = require('./build-utils/loadPresets');
module.exports = ({mode, presets} = {mode: 'development', presets: []}) => webpackMerge({
    mode,
    entry: './src/index.tsx',
    target: 'web',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.bundle.js',
        publicPath: '/',
    },
    module: {
        rules: [
            {
                test: /\.ts(x)?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
                include: path.join(__dirname, '/src'),
            },
            {
                test: /\.svg$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 5000
                    }
                }
            }
        ],
    },
    devServer: {
        historyApiFallback: true,
        hot: true
    },
    plugins: [new HTMLWebpackPlugin({
        template: 'src/index.html'
    })],
    resolve: {
        modules: ['node_modules'],
        extensions: ['.ts', '.tsx', '.js', '.json']
    }
}, loadPresets({mode, presets}))