Ipfs-http-client isn't a recognized Module in my react app - reactjs

Question

I am trying to use the ipfs package inside my react app but it won't recognize the module when I run.
sudo npm start
I install the module with
sudo npm install -g --unsafe-perm ipfs-http-client
This installs with the following output
> iso-constants#0.1.2 install /home/a/Documents/c/d1/dapp1/Dapp/client/node_modules/iso-constants
> node build.js > index.browser.js
> secp256k1#4.0.2 install /home/a/Documents/c/d1/dapp1/Dapp/client/node_modules/libp2p-crypto/node_modules/secp256k1
> node-gyp-build || exit 0
> ursa-optional#0.10.2 install /home/a/Documents/c/d1/dapp1/Dapp/client/node_modules/ursa-optional
> node rebuild.js
> protobufjs#6.10.2 postinstall /home/a/Documents/c/d1/dapp1/Dapp/client/node_modules/protobufjs
> node scripts/postinstall
npm WARN bootstrap#4.5.0 requires a peer of jquery#1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap#4.5.0 requires a peer of popper.js#^1.16.0 but none is installed. You must install peer dependencies yourself.
npm WARN tsutils#3.17.1 requires a peer of typescript#>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.13 (node_modules/babel/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#2.1.2 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.13 (node_modules/webpack-dev-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.13 (node_modules/jest-haste-map/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
+ ipfs-http-client#49.0.4
added 137 packages from 293 contributors, removed 64 packages, updated 15 packages, moved 8 packages and audited 2367 packages in 118.569s
This is the error I get
./src/components/ipfs/fileUpload.js
Module not found: Can't resolve 'ipfs-api' in '/home/a/Documents/c/d1/dapp1/Dapp/client/src/components/ipfs'
This is the component
import React, { Component, useEffect, useState } from "react";
const ipfsAPI = require('ipfs-api')
// connect to the default API address http://localhost:5001
const UploadImage = () => {
const [request, setRequest] = useState({});
const ipfs = ipfsAPI
const handleSubmit = async (data) => {
const { cid } = await ipfs.add(data)
}
return (
<div>
<form method="post" onSubmit={handleSubmit} enctype="multipart/form-data">
<div>
<label for="profile_pic">Choose file to upload</label>
<input type="file" id="profile_pic" name="profile_pic"
accept=".jpg, .jpeg">
</input>
</div>
<div>
<button>Submit</button>
</div>
</form>
</div>
)
}
export default UploadImage;
I am using node version v14.16.1 and npm version 6.14.12
I have also installed it globally with -g and it also installs successfully but I get the same error when I run sudo npm start.

Answer 1

include a specific version of the ipfs package,
like
npm i ipfs-http-client#33.0.1

Answer 2

I solved it doing this
npm i ipfs-http-client#50.1.2 #babel/core --save