The initial text is understandable, but I recommend a different approach:

Replace

Exactly passing a render callback function to a component is not the issue. The issue is the function as child component implementation chose to use the prop children.

So how could you pass a render callback function to a component in a clean manner?

You would need to name your prop meaningful.

with

Passing a render callback using the function as child component pattern is very common. But that approach is limited, in that there is only one 'children' property in the component. A cleaner and more versatile approach is to pass functions to the component as named props.

This is how common element events are handled, with props-as-attributes like onclick, and onchange, and onsubmit.

Here is an example with a named property passing a function in-line to the Foo component:

...

ref:
https://github.com/reactpatterns/reactpatterns-website/blob/main/docs/stateless-function.md

First Suggestion

I recommend a revision of this example

import PropTypes from 'prop-types'

const UserPassword = props => <p>The user password is: {this.props.userpassword}</p>

UserPassword.propTypes = {
  userpassword: PropTypes.string.isRequired,
}

Username.defaultProps = {
  username: 'Jonh',
}

to:

import PropTypes from 'prop-types'

const UserName = props => <p>The user name is: {this.props.username}</p>

UserName.propTypes = {
  username: PropTypes.string.isRequired,
}

UserName.defaultProps = {
  username: 'Jonh',
}

Reasons

1. In the original, we see a default for username but we don't see where it's used. In the revision it's clear how the username is used.
2. In the original, UserPassword is PascalCased, but Username is a single word. In the revision there is only one function, and it's consistently PascalCased.
3. It's not practical to display a password. It is practical to display a name.

Second Suggestion

Regarding this example:

import PropTypes from 'prop-types'

const UserPassword = (props, context) => <p>User password is {context.password}</p>

WowComponent.contextTypes = {
  password: PropTypes.string.isRequired,
}

Concerns:

1. contextTypes is from the legacy API.
2. WowComponent isn't used in these examples - this example should include a reference to UserName.
3. The RefOrContext parameter (second 'context' param on function) should probably be replaced with useContext.
4. I believe PropTypes.shape should be used to describe context.

Since there are multiple ways of approaching changes to this example, I'm not providing a suggestion.

Thanks!

ref: https://github.com/reactpatterns/reactpatterns-website/blob/main/docs/accessing-a-child-component.md

Please consider adding this text to help explain everything that's going on in the example:

Explanation

In SignInModal, render is executed. The Input component's ref attribute is executed as a function, accepting the current component, which is the Input component itself. The function does not return a value. It uses this, which is scoped to SignInModel to create a new property, InputComponent, and it assigns the Input component to that new property.

When render() executes, the new Input component is created, with its this.textInput assigned the result of createRef(). The component render() is executed and the input element's ref attribute is assigned the new reference. Therefore, in Input, textInput refers to the input element as a child component.

Back in SignInModal, in componentDidMount, this.InputComponent is available, as created in the render. The focus() method is executed on that property, which is the Input component. The focus() method uses its this.textInput property, a reference to the 'input' element, to set the element's focus.