Lightning Web Component Not Working in Contact Detail Page

I have the following lightning web component.

MyPage.html

---

 <template>
   <lightning-record-form
          object-api-name={contactObject}
          fields={myFields}
          onsuccess={handleContactCreated}>
  </lightning-record-form>
 </template>

MyPage.js

---

import { LightningElement } from 'lwc';
import CONTACT_OBJECT from '@salesforce/schema/Contact';
import NAME_FIELD from '@salesforce/schema/Contact.Name';
export default class ContactCreator extends LightningElement {

contactObject = CONTACT_OBJECT;
myFields = [NAME_FIELD];

handleContactCreated(){
    // Run code when account is created.
}

}

This works if I drop this lightning component in Account record detail page. But it does not work in Contact record detail page.

No matter how many times I save it, it disappears. when I come and check it again in the contact record detail page, it's not there.

Can someone help ?

You must have a reference to the Contact page in your web components meta.xml file. I'm assuming yours looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" 
fqn="nameOfComponent">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Account</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

when you need to add Contact as an object inside the objects tags.