Problem with hook in Reacnative

Question

I am starting my studies in Reactnative and I am having difficulties with an exercise I created to train the use of hook useState.

I basically created the following component Contador.js:

import React, { useState } from 'react'
import { Text, Button } from 'react-native'
import Estilo from './estilo'
 
export default ({ inicial = 0, passo = 1 }) => {
    [numero, setNumero] = useState(inicial)
 
    const inc = () => setNumero(numero + passo)
    const dec = () => setNumero(numero - passo)
 
    return (
        <>
            <Text style={Estilo.txtG}>{numero}</Text>
            <Button title="+" onPress={inc} />
            <Button title="-" onPress={dec} />
        </>
    )
}

And called the same twice in mine App.js:

import React from 'react'
import { SafeAreaView, StyleSheet } from 'react-native' 
 
import Contador from './components/Contador'
 
export default () => (
    <SafeAreaView style={style.App}>
        <Contador inicial={100} passo={13} />
        <Contador />
    </SafeAreaView>
)
 
const style = StyleSheet.create({
    App: {
        flexGrow: 1,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 20
    }
})

When I click on the buttons of the second instance of the component the increment and decrement normally occur in the Text of the second instance, so far so good.

But for some reason, when I click the buttons in the first instance of the component, the increment and decrement are displayed in the Text of the second instance of the component, and not of the first.

Could someone tell me why?