Estoy tratando de cargar un archivo en cloudinary a través de mi componente de reacción y luego obtener su URL en la carga exitosa del archivo.

Aquí está mi componente:

 export default function Write() { const [file, setFile] = useState(null) const [photo, setPhoto] = useState('') const postDetails = () => { const data = new FormData() data.append('file', file) data.append('upload_preset', 'mypresetname') data.append('cloud_name', 'mycloudname') console.log(photo) fetch('https://api.cloudinary.com/v1_1/mycloudname/image/upload', { method: 'POST', body: data, }) .then((res) => res.json()) .then((data) => setPhoto(data.url)) .catch((err) => { console.log(err) }) } const handleSubmit = async (e) => { e.preventDefault() postDetails() } return (<form onSubmit={handleSubmit}> <input type='file' name='file' onChange={(e) => setFile(e.target.files[0])} /> <button type='submit'> Publish </button></form>)}

cuando trato de hacer .then((data) => console.log(data.url)) en lugar de .then((data) => setPhoto(data.url)) obtengo la url correctamente pero cuando estoy haciendo .then((data) => (setPhoto(data.url), console.log(photo))) obtengo una cadena vacía para la foto. ¿Por qué cuando había fijado el valor de la foto?

por favor ayuda gracias