component.js

/**
 * WordPress dependencies
 */
import { registerPlugin } from '@wordpress/plugins';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { TextControl } from '@wordpress/components';
import { useEntityProp } from '@wordpress/core-data';

function SocialSettings() {
	const [ links, setLinks ] = useEntityProp( 'root', 'site', 'social_links' );

	return (
		<PluginDocumentSettingPanel className="social-settings" title="Social">
			<TextControl
				value={ links?.twitter ?? '' }
				placeholder="Twitter"
				onChange={ ( newValue ) => {
					setLinks( {
						...links,
						twitter: newValue
					} );
				} }
			/>
			<TextControl
				value={ links?.github ?? '' }
				placeholder="Github"
				onChange={ ( newValue ) => {
					setLinks( {
						...links,
						github: newValue
					} );
				} }
			/>
		</PluginDocumentSettingPanel>
	);
}

registerPlugin( 'social-settings-test', { render: SocialSettings } );

settings.php

<?php
add_action( 'rest_api_init', function() {
	register_setting(
		'general',
		'social_links',
		array(
			'type'         => 'object',
			'description'  => 'Social Links',
			'default'      => array(
				'twitter' => 'https://twitter.com',
				'github'  => 'https://github.com',
			),
			'show_in_rest' => array(
				'schema' => array(
					'type'       => 'object',
					'properties' => array(
						'twitter' => array(
							'type' => 'string',
						),
						'github' => array(
							'type' => 'string',
						),
					),
				),
			),
		)
	);
} );