URL Shortening API with React

This was a fun project that helped me practice React. The CSS was the most difficult and time-consuming part. Questions:

• I used a ref to keep track of the input DOM element so that I could use the Constraint validation API to check whether the inputted URL is valid and display the error if necessary. Is this the right approach?
• To make sure that the shortened links are persisted after the user refreshes the browser, I used localStorage here. Is this the right way to do this?
• Do I need to clean up this timer somehow when the component unmounts? The timer only runs when the user clicks the copy button.
• Is this a good way to show and hide the mobile navigation menu?
• If the API call returns an error, I show a generic error message and log the error. I'm not sure if there is a better way of doing this.
• I experimented with using an ARIA live region for the API error message and the list of shortened links so that any changes are read by the screen reader. Not sure if this is the idiomatic way to do something like this.
• Is using the CSS filter property the best way of changing the color of an svg without having to edit the svg file?

Please let me know if I missed anything else! Thanks. :)