Component does not work with React useRef hooks

[stiofand]

onst Home = props => {

    const store = props.mainStore;
    const _panel = React.useRef(null);

    const togglePanel = () => {
        const store = props.mainStore;
        const visibility = !store.showSlideUpPanel;
        store.showSlideUpPanel = visibility;
        visibility ? _panel.show() : _panel.hide();
    };

    return (
        <View style={styles.container}>
            <Text>{store.showSlideUpPanel ? 'Visible': 'Hidden'}</Text>
            <Button title="Show Panel" onPress={() => togglePanel()}/>
            <SlidingUpPanel ref={_panel}>
                <View style={styles.container}>
                    <Text>Here is the content inside the panel</Text>
                    <Button title="Close Panel" onPress={() =>togglePanel()}/>
                </View>
            </SlidingUpPanel>
        </View>
    );
};

Using store or direct method error is thrown panel.show() is undefined and panel.hide() is undefined.

using ref directly without mobX store:

   let _panel = React.useRef(null);
    return (
        <View style={styles.container}>
            <Text>{store.showSlideUpPanel ? 'Visible': 'Hidden'}</Text>
            <Button title="Show Panel" onPress={() => _panel.show()}/>
            <SlidingUpPanel ref={_panel}>
                <View style={styles.container}>
                    <Text>Here is the content inside the panel</Text>
                    <Button title="Close Panel" onPress={() =>_panel.hide()}/>
                </View>
            </SlidingUpPanel>
        </View>
    );
-->
_panel.show is not a function. (In '_panel.show()', '_panel.show' is undefined)

[octopitus]

- visibility ? _panel.show() : _panel.hide();
+ visibility ? _panel.current.show() : _panel.current.hide(); 

useRef holds the value in its .current property.