need to make web page dispaly after fething the data in Next.js

I'm using Next.js, where im new to Next.js; I have some knowledge in javaScript
I have written some code to get the API of my JSON_file(which is my data that needs to be displayed in /blogs webpage);

import React from 'react'

const blogs = () => {
 var element
 (async()=>{

  var data=await fetch("http://localhost:3000/api")
  data=await data.json();
  console.log(data);
  console.log(data.length)
  for (let index = 0; index < data.length; index++) {
     element = data[index];
    // document.getElementById(tilte).innerHTML+=element["title"]
    console.log(element["title"])
  }
})()

in this above code, I have written some code to fetch data from API, but the above-commented code( document.getElementById(tilte).innerHTML+=element["title"] ) is not working and getting error as( Cannot read properties of null (reading 'innerHTML') ) but I wanted to print this in my web page so I tried to print in return function which also does not worked

  return (
    <>
    <div><h1>
      Welcome to my  blogs
    </h1>
    </div>
  
    <div id="tilte">
          {console.log(element["title"])}
    </div>
    </>
  )
  
}


export default blogs

in this, I tried to console.log my element variable in the return function but I'm getting undefined, I understood that this is because JavaScript has Asynchronous behavior

I tried to make blogs export function async and aw

  const blogs = async () => {
  var element
  await (async () => {

but given as an error( Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead )

even I tried some other options of putting return function inside iife but this will not even display welcome to my blogs line

hoping for solution,,

Try using useEffect() with useState() to update the state of the blog once you fetch the data, like this:

import React, {useEffect, useState} from 'react'

const Blogs = () => {
  const [content, setContent] = useState("");

  useEffect(() => {
    const func = async () =>{
      let data = await fetch("http://localhost:3000/api");
      data = await data.json();
      console.log(data);
      console.log(data.length);
      for (let index = 0; index < data.length; index++) {
        setContent ((prevState) => prevState + data[index]);
      }
    }
    func();
  }, []);

  return (
    <>
      <div><h1>
        Welcome to my  blogs
      </h1>
      </div>

      <div id="tilte">
        {content}
      </div>
    </>
  )
}