How can I remove this error when I deploy my React App?

Question

Currently I have a functioning React app that I am able to run on localhost:3000. My current deployment process is as follows: I ran npm run build, and uploaded that file to my shared hosting provider.

I then added a .htaccess file with

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

Then I added "homepage": ".", in the package.json. (I even tried to add the "homepage": "http://websiteexample.com", instead of the . ).

From another post I seen, I even removed the forward slashes in my index.html.

None of this seems to work and gives me a blank page with the following error in the console: DevTools failed to load source map: Could not parse content for https://website.com/static/js/main.f532f71f.js.map: Unexpected token < in JSON at position 0

Question: How can I deploy it? Is there something I am missing?

UPDATE: I just deployed another react app, it seems as though this process works fine, but the issue is coming from one of my files... just need to figure out which one

UPDATE 2: I found the file... the error that I am getting now is: Uncaught TypeError: (0 , kn.forwardRef) is not a function What is this? Will update again soon.

UPDATE 3: I have a modal that takes props, which is making all these issues. BUT why does it fail to render once deployed, but works on localhost? Be back soon with more answers.

Final Update: The error was coming from the following line"

{ props.accordion1_1 ?  <Accordion></Accordion> : <Typogrpahy></Typography>}

The accordion comes from React Material Ui. So I decided to add a useEffect to watch for the props.