react-native - React.forwardRef の問題。null はオブジェクトではありません (「ref.current.focus」を評価します)

Question

listHeaderComponent と listFooterComponent を含む flatList があります。ユーザーが listItem を追加した後、listFooterComponent にフォーカスを与える必要があります。

<StyledList
      data={data}
      keyExtractor={item => item.name}
      renderItem={({item, index}) => {
        console.log('index: ' + index);
        return <FlowerListItem item={item} />;
      }}
      ListHeaderComponent={() => {
        if (isFlowerList) {
          return (
            <DiaryFlowerHeader
              onPress={onPress}
              goBack={goBack}
              focusNext={focusNext}
            />
          );
        }
      }}
      ListFooterComponent={() => {
        if (isFlowerList) {
          return <DiaryFlowerFooter ref={reference} data={data} />;
        }
      }}
    />

フッターで、後でフォーカスを与えるために、この forwardRef を作成しました。

const NextButton = React.forwardRef((props, ref) => (
    <Button
      title="next"
      hasBackgroundColor={true}
      onPress={() => {
        onPress();
      }}
      ref={ref}
    />
  ));

  if (data && data.length > 0) {
    return (
      <Container>
        <ButtonView>
          <NextButton ref={reference} />
        </ButtonView>
      </Container>
    );
  }

メイン ページと nextFocus 関数で参照を作成し、ボタンにフォーカスを与えます。

const ref = React.createRef();
  const focusNext = () => {
    ref.current.focus();
  };

  return (
    <List
      data={flowers}
      onPress={addFlower}
      goBack={navigationGoBack}
      isFlowerList
      reference={ref}
      focusNext={focusNext}
    />
  );

しかし、参照は常に未定義であり、フォーカスを与えようとするとクラッシュします。