import web3 into react js getting BREAKING CHANGE: webpack < 5 used to incl

I am having problems with importing web3 into reactjs. To replicate my problem, initiallize a new react app as so

npx create-react-app my-app
cd my-app

then open terminal in this location. Write:

npm install web3
npm install

in the App,js file add the following line

import Web3 from "web3"; 

I got the error after I do npm start then I got the unsolved error which is

Module not found: Error: Can't resolve 'stream'

Module not found: Error: Can't resolve 'crypto'

I tried finding a solution online, in particular I tried each of

1. How to Polyfill node core modules in webpack 5
2. https://www.youtube.com/watch?v=u1PPNIBvQjk
3. Importing web3 causing a problem in react js
4. https://github.com/facebook/create-react-app/issues/11756#issuecomment-1001162736
5. https://namespaceit.com/blog/how-fix-breaking-change-webpack-5-used-to-include-polyfills-for-nodejs-core-modules-by-default-error
6. How to create React App including Web3 using create-react-app? I am getting Module not found Error. BREAKING CHANGE: webpack < 5 used

None seem to work with me. Is there any advice on how to solve this problem?
Thank you!