Your MX points to a proxied hostname. Those will only pass HTTP and HTTPS traffic. Your MX must point to a DNS Only hostname. If you are using the same server for your web and email, you will want to create an additional A record such as mail.example.com to use in your MX record. You will point out to the same IP as you use in the A record for example.com, but set it to DNS Only. You can then use that hostname as the target in your MX record.
The following Community #tutorial covers this in more detail.
You cannot use CNAMEs. You have to use an A record as I described in my previous reply. You cannot use the apex name example.com in your email client server names if you plan on using the Cloudflare proxy to protect your web traffic to that hostname.
While your email will work this way, you are no longer using the Cloudflare proxy on your apex name example.com. This means you will not have any of the Cloudflare performance or security features available on visitors to that name.
The purpose of creating the A record for mail.example.com was to use it in yor MX record. That way you can keep the apex name .
You cannot set any records to proxied if you need to access them for services other than HTTP and HTTPS. Email FTP, SFTP, SSH, etc do not work on hostnames.
In your original edited screenshot, you had your MX pointed to your apex domain which was also proxied. That combination will not work for email. In your second edited screenshot you had your MX pointed to an IP. That also does not work. MX records must point to A or AAAA records which are hostnames, not IP addresses. Perhaps that was an error in the edit of your screenshot.
Your web traffic to your apex domain is not protected by Cloudflare since it is set to DNS Only.
If you update your MX record to point to the mail hostname instead of your apex domain, you can enable Proxied mode to protect web traffic to your apex domain. The reason behind adding a dedicated name of mail is to allow it to be so email works and you can use :orange on the domain by itself.