this is my react App component. i am observing display of message 'abra-ca-dabra' twice. why is it twice and not once. AS PER ME since in useState(function) function is called once on initialization and again once for each click on my increment/decrement buttons; i should get display of 'abra-ca-dabra' message once for both initial loading and subsequent clicks on my buttons rather than twice... I AM VERY CONFUSED REGARDING TWICE DISPLAY OF MY MESSAGE...

import React, {useState} from 'react'
import logo from './logo.svg';
import './App.css';
import {Alert, Button} from 'react-bootstrap'

function App() {

const display = () => {console.log("abra-ca-dabra"); return 0}
const[count, setCount] = useState(display())

const increment = () => setCount(count + 1)
const decrement = () => setCount(count - 1)

return (

<div className="App">
<Button variant="info" onClick={increment}>+</Button>
<Alert>{count}</Alert>
<Button variant='warning' onClick={decrement}>-</Button>
</div>

);
}

export default App;