You need to create (if you don't already have) an override to the registration script. For step-by-step instructions on creating an override to scripts, you can refer to the following blog: https://www.joomlashack.com/blog/joomla-how-to/how-to-simplify-default-registration-form-in-joomla-3/

On Joomla 4, the registration script that needs to be updated follows.

templates\<Your_Template_Name>\html\com_users\registration\default.php

Apply the following changes to it.

<?php
defined('_JEXEC') or die;
// more statements...
?>

<!-- Add the following JavaScript code -->
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
   // Find the email and username input fields
    var emailField = document.getElementById('jform_email1');
    var usernameField = document.getElementById('jform_username');
    var usernameLabel = document.getElementById('jform_username-lbl');

    // Uncomment the following to make sure the correct elements are selected. If any of the following is null, check the IDs used above.
   // alert("all of the following should have values (NOT null)"
    //  + "\n - usernameField: " + usernameField
    //  + "\n - emailField: " + emailField
    //  + "\n - usernameLabel: " + usernameLabel);

    // Hide the username "input elemnet" and its "label"
    usernameField.parentElement.style.display = 'none';
    usernameLabel.parentElement.style.display = 'none';

   // Make sure the emailField exists
    if (emailField) {
        // Assign the value of the email field to the username field
        emailField.addEventListener('blur', function () {
            // Trim spaces
            var emailValue = emailField.value.trim();

            // Assign the email as the username
            usernameField.value = emailValue;
        });
    }
});
</script>

<div class="com-users-registration registration">
<!-- more statements --> 
</div>

If you don't have an override to the registration script, you need to create one by copying the original script to the override folder. For Joomla 4 on MS Windows:

copy <proj_folder>\components\com_users\tmpl\registration\default.php <proj_folder>\<Your_Template_Name>\html\com_users\registration\default.php

Then, you need to apply the following changes to the new script (above).

<?php
   defined('_JEXEC') or die;
   // more statements...
?>

<div class="com-users-registration registration">
    <!-- more statements --> 
</div>

<!-- Add the following JavaScript code to the end of the script -->
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
   // Find the email and username input fields
    var emailField = document.getElementById('jform_email1');
    var usernameField = document.getElementById('jform_username');
    var usernameLabel = document.getElementById('jform_username-lbl');

    // Uncomment the following to make sure the correct elements are selected. If any of the following is null, check the IDs used above.
   // alert("all of the following should have values (NOT null)"
    //  + "\n - usernameField: " + usernameField
    //  + "\n - emailField: " + emailField
    //  + "\n - usernameLabel: " + usernameLabel);

    // Hide the username "input elemnet" and its "label"
    usernameField.parentElement.style.display = 'none';
    usernameLabel.parentElement.style.display = 'none';

   // Make sure the emailField exists
    if (emailField) {
        // Assign the value of the email field to the username field
        emailField.addEventListener('blur', function () {
            // Trim spaces
            var emailValue = emailField.value.trim();

            // Assign the email as the username
            usernameField.value = emailValue;
        });
    }
});
</script>