Double rendering of one fetch

Hi everyone,
I’ve been working on a personal portfolio, and I would like to show random photos on my Flickr account.
So here its the whole of this section of my react.

import './Flickr.scss';
import React, { useEffect } from 'react';

export function Flickr(props) {
	function Myphotos() {
		let img1 = { photoid: '', photosecret: '' };

		let urlflickr = ``;
			.catch((error) => console.error('Error:', error))
			.then((response) => response.json())
			.catch((error) => console.error('Error:', error))
			.then((response) => {
				let random1 = Math.floor(Math.random() *;
				img1.photoid =[random1].id;
				img1.photosecret =[random1].secret;

				if (img1) {
					let urlimg1 = `${img1.photoid}_${img1.photosecret}_b.jpg`;
					document.getElementById('uno').style.backgroundImage = `url(${urlimg1})`;
		setTimeout(Myphotos, 15000);

	function Followmeflickr() {}

	return (
		<div className="flickr">
			<h2>FLICKR PHOTOS</h2>
			<div class="photos">
				<div className="photo" id="uno" />

export default Flickr;

So, I can see one first photo that is changed really fast and after stay 15seconds until I see two photos again.
I’ve been working on it, but couldn’t find the answer.
I tried to have it like onLoad={Myphotos}

I would like to know if someone more had this problem. Thanks