I searched about it and found the following: -
1-Mail-to Links cannot be marked as visited because they do not lead to traditional web pages like HTTP links. Instead, they open the default email client to compose a new email. This behavior is consistent across browsers and is not something that can be changed using standard CSS or HTML.
2-Using React to Manage Link State: Saving the state of the link (clicked or not) in local storage and managing it using React is a viable approach if you need to track whether the user has interacted with the mailto link. By doing so, you can implement custom logic to change the link's appearance based on its state. However, this approach does not override the browser's default behavior.
3-Consistent Color for mailto Links: Some browsers maintain the same color for mailto: links for security reasons. This is to prevent malicious websites from potentially abusing the: visited pseudo-class to determine whether a user has interacted with certain email addresses. While this behavior may limit styling options for mailto: links, it helps protect user privacy and security.
I've implemented the second solution using React, but I don't find it satisfactory as a solution.
Thank you for opening a ticket, but I don't think this is a big issue, especially considering it is all due to standard browser interactions as explained in the comments.
Actively working to circumvent standard browser mechanisms makes me uneasy...