API image not rendering

Question

I am trying to display an image from an API but the image is not coming up. I have tried every means possible but all prove abortive. I am not getting any error but the image just breaks anytime it renders. Here is my code:

import React, { useState, useEffect } from 'react';
import Axios from 'axios';

function LoadCountries() {
  const [personData, setPersonData] = useState('');
  const [value, setValue] = useState(1);

  const fetchData = async () => {
    return Axios.get(`https://randomuser.me/api`)
      .then(({ data }) => {
        return data;
      })
      .catch((error) => {
        console.error(error);
      });
  };
  useEffect(() => {
    fetchData().then((personData) => {
      setPersonData(JSON.stringify(personData.results[0].picture.large));
    });
  }, []);
  return (
    <div>
      <button
        onClick={() => {
          setValue(value + 1);
          console.log(value);
        }}
      >
        Next
      </button>
      <pre>
        <img src={personData} alt='Person' />
        <br />
        {personData}
      </pre>
    </div>
  );
}

export default LoadCountries;

Answer 1

It's working now. All I did was that I removed JSON.stringify(). Below is the correction:

import React, { useState, useEffect } from 'react';
import Axios from 'axios';

function LoadCountries() {
  const [personData, setPersonData] = useState('');
  const [value, setValue] = useState(1)

  const fetchData = async () => {
    return Axios.get(`https://randomuser.me/api`)
      .then(({ data }) => {
        return data;
      })
      .catch((error) => {
        console.error(error);
      });
  };
  useEffect(() => {
    fetchData().then((personData) => {
      setPersonData(personData.results[0].picture.large);
    });
  }, []);
  return (
    <div>
      <button
        onClick={() => {
          setValue(value + 1);
          console.log(value);
        }}
      >
        Next
      </button>
      <pre>
        <img src={personData} alt='Person' />
        <br />
        {personData}
      </pre>
    </div>
  );
}

export default LoadCountries;