React global state with hooks

Question

I am trying to create a global state variable with hooks. My simple test code works perfectly, but the browser gives me warning:

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

import React, {createContext, useState, useContext} from 'react';

const TextContext = createContext();        

function WpApp (props) {
    const [text1, setText1] = useState('this is default');
    return (
        <div>
            <TextContext.Provider value={[text1, setText1]}>
                <Dummy />                   
            </TextContext.Provider>
        </div>
    );
}

function Dummy () {
    const [text1, setText1] = useContext(TextContext);
    return (
        <div>
            <div>{text1}</div>
            <button onClick={() => setText1('This is new text')}>
                Set new
            </button>           
        </div>  
    );
}

The warning is caused by the state variable in Context.Provider value:

<TextContext.Provider value={[text1, setText1]}>

The code works perfectly but the warning is worrying. Is there an error in this code and/or is there a fix that removes this warning?