Oi Pessoal!

Meu comentário não está exibindo na tela, porém, quando dou um console.warn(), meu valor é passado normalmente.

Segue o código do meu arquivo:

comments.jsx

import React, { Fragment, useState } from "react";
import {
  Text,
  Image,
  ScrollView,
  Dimensions,
  StyleSheet,
  FlatList,
  View,
  TextInput,
  TouchableOpacity,
} from "react-native";
import style from "../styles/styles_comments";

const Comments = ({ comments }) => {
  const [stateComments, setStateComments] = useState(comments)

  const addComments = () => {
    console.warn(valueCampInput)
    campInput.clear()
    const newComment = {
      date: Date.now(),
      text: valueCampInput,
      userName: "Gabriel"
    }
    setStateComments([...stateComments, newComment])
  }

  let campInput
  let valueCampInput = ""

  return (
    <Fragment>
      <FlatList
        data={comments}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => 
          <View style={style.inLine}>
            <Text style={{fontWeight: "bold"}}>{item.userName}: </Text>
            <Text>{item.text}</Text>
          </View>
        }
      />
      <View style={style.inLine}>
        <TextInput
          ref={textInput => campInput = textInput}
          onChangeText={text => valueCampInput = text}
          placeholder={"Deixe o seu comentário..."}
          style={{ flex: 1 }}
        />
        <TouchableOpacity onPress={addComments}>
          <Image
            source={require("../../res/img/send.png")}
            style={style.imgSend}
          />
        </TouchableOpacity>
      </View>
    </Fragment>
  );
};

export default Comments;

App.js

import { StatusBar } from 'expo-status-bar';
import React, { Fragment, useEffect, useState } from 'react';
import { Text, Image, ScrollView, Dimensions, StyleSheet, FlatList } from 'react-native';
import Header from './src/components/header';
import Photo from './src/components/photo';
import readPhotos from './src/api/read_api'
import Comments from './src/components/comments'

export default function App() {
  const [photos, setPhotos] = useState([])

  useEffect(()=>{
    readPhotos(setPhotos);
  }, [])
  return (
    <ScrollView>
      <FlatList
        data={photos}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) =>
          <Fragment>
            <Header 
              nameUser={item.userName}
              url={item.userURL} 
            />
            <Photo 
              photoURL={item.url}
              description={item.description} 
              qntLikes={item.likes}
            />
            <Comments comments={item.comentarios} />
          </Fragment>
        }
      />
    </ScrollView>
  );
}