Responsive tip calculator app using React

What are you most proud of, and what would you do differently next time?

I managed to write some pretty robust input validation for the bill and 'number of people' input fields. However, the code is heavily nested and seems quite repetitive, so although it works, I would appreciate some feedback regarding how I could do this better.

What challenges did you encounter, and how did you overcome them?

I encountered an issue where the app wouldn't display properly when deploying to Github Pages. This was due to the file paths being incorrect in the build version of the project. I managed to fix this by adding the "homepage" property to the package.json file and setting it to ".", which allowed the build files to be outputted with the correct file paths.

The images also weren't loading on the production build of the website. I managed to fix this issue by moving the images to the src folder and then importing the images to the .js files before using them.

This caused an issue where the favicon would no longer show up on the live site because the index.html file in the public folder was referencing the favicon file in the src folder. I fixed this issue by moving the favicon file into the public folder and then changing the file path in the 'href' attribute to "%PUBLIC_URL%/favicon.svg".

What specific areas of your project would you like help with?

I would like some help with making my code more efficient and readable if possible.

I'm still a beginner at using React, so some more help regarding this library would be much appreciated. I haven't touched on any of the more complex parts of React yet, and perhaps some of them can be implemented in this project, so any suggestions are welcome.

While the input validation works as intended, I feel like there's a lot of room for improvement, so please let me know if there are any ways in which I can improve that specific part of my code. Thank you for checking out my project. :)