как реализовать приведенный ниже код с использованием функционального компонента без сохранения состояния с помощью ловушки useRef

Question

У меня есть некоторый код в компонентах, основанных на классах, код просто отображает некоторые изображения, которые, когда вы нажимаете на них, изображение переходят в полноэкранный режим, и детали его положения сохраняются для будущего использования, он имеет некоторый ref, управляемый React.createRef () сначала он создает ссылки на родительский «StoryList», затем назначает их дочерним «StoryThumbnail», мы получаем доступ к ширине и высоте некоторых изображений для их родительского компонента. но что, если я хочу использовать вместо этого функциональные компоненты? Я не могу использовать create ref там, в любом случае, чтобы достичь приведенного ниже кода с помощью хуков и useRef?

class StoryList extends React.Component{

    state = {
        story: null,
        position:null,
        active:false
    };


    thumbnails = {};


    constructor(props) {
        super(props);

        props.stories.forEach((story) => {
            this.thumbnails[story.id] = React.createRef();
        });
    }


    onRequestClose = () => this.setState({ story: null, position: null,active:false });

    goToStory = async (story) => {
        const position = await this.thumbnails[story.id].current.measure();
        console.log(position)
        this.setState({ story, position,active:true });
    }

    // {stories}  = this.props;
    render() {

        console.log(this.thumbnails)
        const { onRequestClose } = this;
        const { stories } = this.props;
        const { story, position,active } = this.state;
        return (
            <View style={styles.flex}>
                <ScrollView style={styles.flex} contentInsetAdjustmentBehavior="automatic">
                    <SafeAreaView style={styles.container}>
                        {
                            stories.map(
                                s => (
                                    <StoryThumbnail
                                        ref={this.thumbnails[s.id]}
                                        key={s.id}
                                        selected={!!story && story.id === s.id}
                                        onPress={() => this.goToStory(s)}
                                        story={s}
                                    />
                                ),
                            )
                        }
                    </SafeAreaView>
                </ScrollView>
                {
                    active && (
                        <View style={StyleSheet.absoluteFill}>
                            <StoryModal {...{ story, position, onRequestClose }} />
                        </View>
                    )
                }
            </View>
        );
    }



}

class StoryThumbnail extends React.Component{



    ref = React.createRef();


    render() {
        const { ref } = this;
        const { story, onPress, selected } = this.props;
        return (
            <TouchableWithoutFeedback {...{ onPress }}>
                <View style={styles.container}>
                    {
                        !selected && (
                            <Image source={story.source} style={styles.image} ref={ref} />
                        )
                    }
                </View>
            </TouchableWithoutFeedback>
        );
    }

}