panel.js

import { PluginPrePublishPanel } from '@wordpress/edit-post';
import { registerPlugin } from '@wordpress/plugins';

import Required from './required';

const Test = () => {
  <PluginPrePublishPanel>
    <Required.Fill>
      { ( fills ) => fills.length > 0 ? fills : null ) }
    </Required.Fill>
  </PluginPrePublishPanel>
};

registerPlugin( 'test-plugin-fill-panel', { render: Test } );

required.js

import { createSlotFill } from '@wordpress/components';

const { Fill, Slot } = createSlotFill( 'OneCMSRequiredFields' );

const Required = ( props ) => {
  const {
    children,
    isValid,
  } = props;

  return (
    <>
      { ! isValid && (
        <Slot>
          { children }
        </Slot>
      ) }
      
      { children }
    </>
  );
};

Required.Fill = Fill;

export default Required;

test.js

import { TextControl } from '@wordpress/components';
import { PluginPrePublishPanel } from '@wordpress/edit-post';
import { useState } from '@wordpress/element';
import { registerPlugin } from '@wordpress/plugins';

import Required from './required';

const Test = () => {
  const [ thing, setThing ] = useState( '' );

  return (
    <PluginDocumentSettingPanel
      name="custom-panel"
      title="Custom Panel"
      className="custom-panel"
    >
      <Required isValid={ thing.length > 10 }>
        <TextControl
          onChange={ ( value ) => setThing( value ) }
          value={ thing }
        />
      </Required>
    </PluginDocumentSettingPanel>
  );
};

registerPlugin( 'test-plugin-doc-panel', { render: Test } );