How to access state from a component in React - TypeScript?

How can I access my state from the component GamePieceSquares since GamePieceSquares is declared before the state is created?

Here is the code:

const GamePieceSquares = ({text, id} : {text:any, id:any}) => (<View style={styles.gamePieceSquares}><Text style={styles.text} onPress={() => {console.log('You tapped the button!: '+ text);}}>{text}</Text></View>);export default function TabTwoScreen() {  const [pieceSelectedID, setPieceSelectedID] = useState(0);  return (<Card containerStyle={styles.container}><Card.Title>CARD WITH DIVIDER</Card.Title><View style={styles.gamePiecesRow}><GamePieceSquares text="B" /><Text>{"\n"}</Text> <GamePieceSquares text="D" /><Text>{"\n"}</Text> <GamePieceSquares text="F" /><Text>{"\n"}</Text> <GamePieceSquares text="G" /><Text>{"\n"}</Text> <GamePieceSquares text="I" /><Text>{"\n"}</Text> <GamePieceSquares text="O" /><Text>{"\n"}</Text> <GamePieceSquares text="P" /><Text>{"\n"}</Text> <GamePieceSquares text="L" /><Text>{"\n"}</Text> </View><Card.Divider /></Card><View style={styles.container}><Text >Keyboard</Text></View></View>  );}

Currently, when I click any of the GamePieceSquares, the text value of the component gets printed to the console.

My goal is this: when the GamePieceSquares get clicked, then set the pieceSelectedID to be the value of the id of the GamePieceSquares and then highlight the GamePieceSquare.

Long story short, I wanted to access the state so that I can correctly highlight the GamePieceSquare that was last clicked.