React - ref returns null in event handler

Question

I’m developing with React at a time but had found no reason to use refs, decides to read the documentation more deeply and I came across several examples that indicate to developers where it would make sense to use them. In the documentation the example used is that of an DOM element, in the case of a button totally génerico but which would make sense to keep a reference.

const FancyButton = React.forwardRef((props, ref) => (
    <button ref={ ref } { ...props }>{ props.children }</button>
));

const ref = React.createRef();

function App(props) {

    function onClick(e) {
        console.log(ref.current);
    }

    return (
        <FancyButton ref={ ref } onClick={ onClick }>Clique aqui!</FancyButton>
    );

}

ReactDOM.render(<App />, document.getElementById("root"))

As a test to verify what was returned from a reference I implemented a click event handler that would simply print the value of ref.Current but only get the value null. Could someone tell me where I’m going wrong?