react – function running two times

import React from 'react';
const bring_blogs = async ()=>{
        const response = await fetch('http://localhost/get/blogs',{
            method:'GET',
            headers : {
                'Content-Type' : 'application/json',
            }
        })
        const json = await response.json()
        const blogs = JSON.parse(json.blogs)
        for(let i = 0; i<Object.keys(blogs).length ; i++){
            var key = Object.keys(blogs)[i]
            document.getElementById('blogs-container').innerHTML += `
            <div className="srno">${i+1}</div>
            <div className="title">${blogs[key][0]}</div>
            <div className="desc">${blogs[key][1]}</div>
              `
        }
    }
export const Blogs = (props) => {
    props.changetitle('My Blogs')

    bring_blogs()

  return (
      <>
      <div className="blogs-container" id='blogs-container'>
        <div className="srno"></div>
        <div className="title"></div>
        <div className="desc"></div>
      </div>
      </>
  );
};