How to fix findDOMNode is deprecated and will be removed in React

# Check for outdated packages
npm outdated

# Update specific package
npm update react-bootstrap

# Or update to latest major version
npm install react-bootstrap@latest

npm install @mui/material@latest @mui/styles@latest

import { findDOMNode } from 'react-dom';

function AutoselectingInput() {
  useEffect(() => {
    const input = findDOMNode(this);
    input.select();
  }, []);
  return <input defaultValue="Hello" />
}

import { useRef, useEffect } from 'react';

function AutoselectingInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.select();
  }, []);

  return <input ref={inputRef} defaultValue="Hello" />
}

import { findDOMNode } from 'react-dom';

class MyComponent extends React.Component {
  componentDidMount() {
    const node = findDOMNode(this);
    node.scrollIntoView();
  }

  render() {
    return <div>Content</div>;
  }
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.divRef = React.createRef();
  }

  componentDidMount() {
    this.divRef.current.scrollIntoView();
  }

  render() {
    return <div ref={this.divRef}>Content</div>;
  }
}

import { forwardRef, useRef } from 'react';

// Component that forwards refs
const CustomInput = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

// Parent component using the forwarded ref
function ParentComponent() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <CustomInput ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

// index.js - Before
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// After (temporary workaround)
root.render(<App />);

// Only wrap parts of your app that don't use problematic libraries
function App() {
  return (
    <div>
      <ProblematicComponent /> {/* Outside StrictMode */}
      <React.StrictMode>
        <YourModernComponents />
      </React.StrictMode>
    </div>
  );
}