I've used SEOmatic and ImageOptimize together before and never had those issues. SEOmatic should care less about the presence of the ImageOptimize field on the asset and you definitely don't need to specify custom ImageOptimize variants for your SEO/social purposes. SEOmatic grabs the raw image (like you would grab the asset url in the templates) and does its own transforms to get that image ready for social/SEO use.
My guess is something is incorrectly setup in the Content SEO settings for whatever section the entry you're currently editing exists in. If you still can't figure it out, I'd be curious to see screenshots of those settings...
Also, fwiw, Andrew does provide a very handy SEO Settings field that might be worth considering as a replacement to the setup you've got going on currently. As he mentions in the plugin README:
Modern SEO works best if it actually reflects what is on the page, visible to the user, so pulling from your page's content will work well in most cases.
So what I've done (and would recommend, though it would mean you would lose your client-friendly field descriptions) is to pull the SEO/social data out of the content of the page and then add the SEO Settings field to that last tab just in case you need to overwrite stuff. For example, rather than adding the asset used as the masthead image and the asset used for SEO/social separately, use the same field for both. Makes it simpler on the client and on you! And then, if and when you do need a different image for the social/SEO metadata, you can use the SEO Settings field.
background-image
is set to for the previews. Might give you clues as to what isn't working, and why.