Custom Lightning Web Component not showing on new or edit page

I've created a custom LWC that is an SVG graphic used to replace a normal field. The idea is that the user can click the svg in different areas and it will update the field value in the background.

I've added it to the page layout in the Lightning App Builder.

The issue I'm having is that it only shows on the record detail page. When I add a new record or edit an existing record the component is missing from the form.

I've checked the meta file and have isExposed set to true and a target for Lightning__RecordPage.

I've tried search for anyone with the same issue, but just get lots of record_Edit_form posts that don't seem relevant.

Any help is appreciated.

Here is the code form my LWC in it helps

BCInput.js

import { LightningElement, api, wire, track } from 'lwc';
import { getRecord, getFieldValue, updateRecord } from "lightning/uiRecordApi";
import BC_FIELD from "@salesforce/schema/key_Player__c.BC_Status__c";
import ID_FIELD from "@salesforce/schema/Key_Player__c.Id";

const fields = [ID_FIELD,BC_FIELD];

export default class BCInput extends LightningElement {
    @api recordId;
    @track _bcValue;

    @wire(getRecord, { recordId: "$recordId", fields: fields })
    keyPlayer({data}) {
        this.value = getFieldValue(data, BC_FIELD);
    }

    updateBC(event) {

        const tmpfields = {};

        tmpfields[ID_FIELD.fieldApiName] = this.recordId;
        if (this.value === event.detail.message){
            tmpfields[BC_FIELD.fieldApiName] = null;
        }else{
            tmpfields[BC_FIELD.fieldApiName] = event.detail.message;
        }
        const recordInput = { fields: tmpfields };
        //console.log(JSON.parse(JSON.stringify(tmpfields)));
        updateRecord(recordInput);
    }

    get value() {
        return this._bcValue ;
    }
    set value(value) {
        this._bcValue = value;
    }
}

BCInput.html

<template>
    <div class="slds-form-element">
        <label class="slds-form-element__label" for="text-input-id-139">
          BC Status</label>
        <div class="slds-form-element__control bc">
            <c-b-c id="text-input-id-139" recordid={recordId} onbcclicked={updateBC} value={value} ></c-b-c>
        </div>
      </div>
</template>

BCInput.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>BC Input</masterLabel>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>