Why this react code requests data from server twice

Question

I have this minimal code to fetch data from a server, but it requests data twice, what I'm doing wrong?

import { useEffect, useState } from 'react'
import './App.css'
import axios from 'axios';

function App() {
  const [posts, setPosts] = useState(null);

  const getPosts = () => {
    axios.get('https://tamoudahost.com/wp/wp-json/wp/v2/posts').then((res) =>{
      setPosts(res.data)
    } )
  }

  useEffect(() => {
    !posts && getPosts()
  }, [])

  return (
    <div className="App">
        {posts && posts.map((post) => <div key={post.id}>{post.id} : {post.date}</div>)}
    </div>
  )
}

export default App

I'm using vite