node-gyp build error while running npm install in reactjs

I took a frontend project repo which is built on reactjs & WHILE I run npm i command it is giving me whole bunch of error.

1. I tried deleting package.lock.json file & again run the command
2. I tried by doing npm update
3. I tried npm i --force & npm update --force But same error is giving ..

update

I forcely cache cleaned using this command npm cache clean -f. After that I again run npm i.. now giviing this error...

0 verbose cli [
0 verbose cli '/usr/local/Cellar/node/16.11.1/bin/node',
0 verbose cli '/usr/local/bin/npm',
0 verbose cli 'i'
0 verbose cli ]
1 info using [email protected]
2 info using [email protected]
3 timing npm:load:whichnode Completed in 0ms
4 timing config:load:defaults Completed in 2ms
5 timing config:load:file:/usr/local/lib/node_modules/npm/npmrc Completed in 2ms
6 timing config:load:builtin Completed in 2ms
7 timing config:load:cli Completed in 2ms
8 timing config:load:env Completed in 1ms
9 timing config:load:file:/Users/macbookpro/Desktop/private_project/xyzvara/to-let/.npmrc Completed in 1ms
10 timing config:load:project Completed in 1ms
11 timing config:load:file:/Users/macbookpro/.npmrc Completed in 0ms
12 timing config:load:user Completed in 0ms
13 timing config:load:file:/usr/local/etc/npmrc Completed in 0ms
14 timing config:load:global Completed in 0ms
15 timing config:load:validate Completed in 1ms
16 timing config:load:credentials Completed in 1ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 11ms
19 timing npm:load:configload Completed in 11ms
20 timing npm:load:setTitle Completed in 3ms
21 timing npm:load:setupLog Completed in 0ms
22 timing config:load:flatten Completed in 4ms
23 timing npm:load:cleanupLog Completed in 2ms
24 timing npm:load:configScope Completed in 0ms
25 timing npm:load:projectScope Completed in 1ms
26 timing npm:load Completed in 22ms
27 timing arborist:ctor Completed in 1ms
28 timing arborist:ctor Completed in 0ms
29 timing idealTree:init Completed in 19ms
30 timing idealTree:userRequests Completed in 0ms
31 silly idealTree buildDeps
32 silly fetch manifest @ckeditor/ckeditor5-build-classic@^25.0.0
33 http fetch GET 200 https://registry.npmjs.org/@ckeditor%2fckeditor5-build-classic 2340ms (cache miss)
34 silly fetch manifest @ckeditor/ckeditor5-react@^3.0.2
35 http fetch GET 200 https://registry.npmjs.org/@ckeditor%2fckeditor5-react 2069ms (cache miss)
36 silly fetch manifest react@^16.14.0
37 http fetch GET 200 https://registry.npmjs.org/react 905ms (cache miss)
38 silly fetch manifest @hookform/devtools@^3.1.0
39 http fetch GET 200 https://registry.npmjs.org/@hookform%2fdevtools 1461ms (cache miss)
40 silly fetch manifest react@>=17.0.2
41 timing idealTree Completed in 6832ms
42 timing command:install Completed in 6858ms
43 verbose stack Error: unable to resolve dependency tree
43 verbose stack at Arborist.[failPeerConflict] (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1356:25)
43 verbose stack at Arborist.[loadPeerSet] (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1322:34)
43 verbose stack at async Arborist.[buildDepStep] (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:930:11)
43 verbose stack at async Arborist.buildIdealTree (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:216:7)
43 verbose stack at async Promise.all (index 1)
43 verbose stack at async Arborist.reify (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:149:5)
43 verbose stack at async Install.install (/usr/local/lib/node_modules/npm/lib/install.js:170:5)
44 verbose cwd /Users/macbookpro/Desktop/private_project/xyzvara/to-let
45 verbose Darwin 20.3.0
46 verbose argv "/usr/local/Cellar/node/16.11.1/bin/node" "/usr/local/bin/npm" "i"
47 verbose node v16.11.1
48 verbose npm v8.1.2
49 error code ERESOLVE
50 error ERESOLVE unable to resolve dependency tree
51 error
52 error While resolving: [1mtolet[22m@[1m0.1.0[22m
52 error Found: [1mreact[22m@[1m16.14.0[22m[2m[22m
52 error [2mnode_modules/react[22m
52 error [1mreact[22m@"[1m^16.14.0[22m" from the root project
52 error
52 error Could not resolve dependency:
52 error [35mpeer[39m [1mreact[22m@"[1m>=17.0.2[22m" from [1m@hookform/devtools[22m@[1m3.1.0[22m[2m[22m
52 error [2mnode_modules/@hookform/devtools[22m
52 error [1m@hookform/devtools[22m@"[1m^3.1.0[22m" from the root project
52 error
52 error Fix the upstream dependency conflict, or retry
52 error this command with --force, or --legacy-peer-deps
52 error to accept an incorrect (and potentially broken) dependency resolution.
52 error
52 error See /Users/macbookpro/.npm/eresolve-report.txt for a full report.
53 verbose exit 1

update 2

I encountered an error that telling network error. So, to faster loading speed I installed yarn & run yarn install. After that strangely It installed node modules that was not happening while I was using npm . After that while tried to run the project It was giving node-sass error. so I did npm audit fix -f. but, It didn't fix all error but if I run command to start the project it is now running without giving error. Very strange , I don't have any perfect answer of this behaviour.