How to fix forwardRef is not a function in React

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

npm install [email protected] [email protected]
# or
yarn add [email protected] [email protected]

rm -rf node_modules package-lock.json
npm install

// Correct - named import from 'react'
import { forwardRef } from 'react';

// Also correct - accessing from React namespace
import React from 'react';
const MyComponent = React.forwardRef((props, ref) => {
  // component code
});

// WRONG - forwardRef is not in react-dom
import { forwardRef } from 'react-dom';

// WRONG - typo in import name
import { forwardRef } from 'raect';

npm ls react
# or
yarn why react

# npm
npm dedupe

# yarn
yarn dedupe

# pnpm
pnpm dedupe

module.exports = {
  resolve: {
    alias: {
      react: require.resolve('react'),
      'react-dom': require.resolve('react-dom')
    }
  }
};

npm list react

npm install react@^16.3.0 react-dom@^16.3.0
# or for the latest
npm install react@latest react-dom@latest

npm list preact

npm install preact@latest preact-compat@latest

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      react: 'preact/compat',
      'react-dom': 'preact/compat'
    }
  }
};

# Check for outdated packages
npm outdated

# Update specific libraries known to have issues
npm update @reach/ui mobx-react react-router-dom

// jest.config.js
module.exports = {
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    '^react$': require.resolve('react'),
    '^react-dom$': require.resolve('react-dom')
  },
  // Ensure all packages use the same React version
  moduleDirectories: ['node_modules', '<rootDir>/']
};

npm install --save-dev @testing-library/react@latest