JavaScript function creates multiple items when using React

Question

I am trying to build a social media website with basic HTML and JavaScript, but now I am trying to make it with React, and when I copy my JavaScript code it runs multiple times for some reason; creating more HTML objects than I want. Here the entire .jsx file:

import { useState, useEffect } from 'react'
function Home() {

  const [data, setData] = useState({
    value: '1',
    setValue: (newValue) => {
      setMyState({ ...myState, value: newValue })
    }
  })

  useEffect(() => {
    fetch("http://localhost:5000/home", {})
      .then(res => res.json())
      .then(data => setData(data.result))
  }, [])

  if (data.value == 1) {
    return (
      <div></div>
    )
  }

  else {
    ReadData(data)
    return (
      <div id='Posts'>

      </div>
    )
  }
}

function ReadData(data){
  for (let i = 0; i < data.length; i++) {
      var Date = data[i].created;

      let Button = document.createElement("div");
      Button.id = "But " + data[i].id;
      Button.className = "PostButton";
      Button.onclick = function () { event.stopPropagation(window.location.href = `Post?/${data[i].name}/${data[i].id}`) }
      document.getElementById("Posts").appendChild(Button);

      let Main = document.createElement("div");
      Main.id = "post " + data[i].id;
      document.getElementById(`But ${data[i].id}`).appendChild(Main);

      let info = document.createElement("div");
      info.id = "Post Info " + i;
      document.getElementById("post " + data[i].id).appendChild(info);

      info.innerHTML = `<button class='SameLine' id='NameDisplay' onclick="event.stopPropagation(window.location.href='Profile?${data[i].name}')">${data[i].name}</button>`

      calculateDate(Date, info);
      SetContent(i, data);
  }
}

function calculateDate(Date, info){
  if (Date >= 60) {
      Date = Math.floor(Date / 60);
      if (Date >= 24) {
          Date = Math.floor(Date / 24);
          if(Date >= 30){
              Date = Math.floor(Date / 30);

              if(Date > 365){
                  Date = Math.floor(Date / 365);
                  if(Date < 2){
                      info.innerHTML += ` <span class='SameLine' id='TimePassed'> &nbsp; ${Date} year ago</span> <br><br>`
                  }

                  else {
                      info.innerHTML += ` <span class='SameLine' id='TimePassed'> &nbsp; ${Date} years ago</span> <br><br>`
                  }
              }

              else if(Date < 2){
                  info.innerHTML += ` <span class='SameLine' id='TimePassed'> &nbsp; ${Date} month ago</span> <br><br>`
              }
  
              else  {
                  info.innerHTML += ` <span class='SameLine' id='TimePassed'> &nbsp; ${Date} months ago</span> <br><br>`
              }
          }

          else if(Date < 2){
              info.innerHTML += ` <span class='SameLine' id='TimePassed'> &nbsp; ${Date} day ago</span> <br><br>`
          }

          else  {
              info.innerHTML += ` <span class='SameLine' id='TimePassed'> &nbsp; ${Date} days ago</span> <br><br>`
          }

      }

      else {
          if(Date < 2){
              info.innerHTML += `<span class='SameLine' id='TimePassed'> &nbsp; ${Date} hours ago</span> <br><br>`
          }

          else {
              info.innerHTML += `<span class='SameLine' id='TimePassed'> &nbsp; ${Date} hour ago</span> <br><br>`
          }
      }
  }

  else {
      if (Date < 1) {
          info.innerHTML += `<span class='SameLine' id='TimePassed'> &nbsp; less than a minute ago</span> <br><br>`
      }

      else if(Date = 1) {
          info.innerHTML += `<span class='SameLine' id='TimePassed'> &nbsp; ${Date} minute ago</span> <br><br>`
      }

      else {
          info.innerHTML += `<span class='SameLine' id='TimePassed'> &nbsp; ${Date} minutes ago</span> <br><br> `
      }
  }
}

function SetContent(i, data){
  let content = document.createElement("div");
  content.id = "Content " + i;
  document.getElementById("post " + data[i].id).appendChild(content);
  let text = document.createElement("p");
  text.id = "Header";
  text.style = "text-align: left; font-size: 110%; font-weight: 110%;";
  text.innerText = `${data[i].content}`;
  document.getElementById("Content " + i).appendChild(text);

  let buttons = document.createElement("div");
  buttons.id = "Buttons " + i;
  buttons.innerHTML = `<input type="button" id="Likes ${data[i].id}" value="${data[i].likes} likes" onclick="event.stopPropagation(PostLike(${data[i].id}))">
  <input type="button" id="Dislike ${data[i].id}" value="${data[i].dislikes} dislikes" onclick="event.stopPropagation(PostDislike(${data[i].id}))">
  <input type="button" id="Comment ${data[i].id}" value="${data[i].comments} comments" onclick="event.stopPropagation(PostComment(${data[i].id}))">`
  if(data[i].Owner == 1){
      buttons.innerHTML += `<input type="button" style="float: right;" id="Delete ${data[i].id}" value="Delete Post" onclick="event.stopPropagation(PostDelete(${data[i].id}))">`
  }

  buttons.innerHTML += `<hr>`
  document.getElementById("post " + data[i].id).appendChild(buttons);
}


export default Home;

the data that it gets from the fetch is this:

[{ "data": [{ "id": "1", "user_id": "1", "content": "hai", "likes": "2", "dislikes": "1", "comments": "0", "created": "2021-11-05 14:49:13" }, { "id": "2", "user_id": "1", "content": "hoi", "likes": "2", "dislikes": "0", "comments": "0", "created": "2021-11-05 14:49:13" } ] }]

The expected outcome is that for every object in the array there is one wrapper div with content buttons and post info div, but the outcome that I get is that the wrapper has all the divs doubled, so I get 2 content div elements, etc.

The html output that i get is this:

<div id="But 72" class="PostButton"><div id="post 72"><div id="Post Info 0"><button class="SameLine" id="NameDisplay" onclick="event.stopPropagation(window.location.href='Profile?bla')">bla</button> <span class="SameLine" id="TimePassed"> &nbsp; 1 month ago</span> <br><br></div><div id="Content 0"><p id="Header" style="text-align: left; font-size: 110%;">bla</p><p id="Header" style="text-align: left; font-size: 110%;">bla</p></div><div id="Buttons 0"><input type="button" id="Likes 72" value="0 likes" onclick="event.stopPropagation(PostLike(72))">
  <input type="button" id="Dislike 72" value="0 dislikes" onclick="event.stopPropagation(PostDislike(72))">
  <input type="button" id="Comment 72" value="0 comments" onclick="event.stopPropagation(PostComment(72))"><input type="button" style="float: right;" id="Delete 72" value="Delete Post" onclick="event.stopPropagation(PostDelete(72))"><hr></div><div id="Post Info 0"><button class="SameLine" id="NameDisplay" onclick="event.stopPropagation(window.location.href='Profile?bla')">bla</button> <span class="SameLine" id="TimePassed"> &nbsp; 1 month ago</span> <br><br></div><div id="Content 0"></div><div id="Buttons 0"><input type="button" id="Likes 72" value="0 likes" onclick="event.stopPropagation(PostLike(72))">
  <input type="button" id="Dislike 72" value="0 dislikes" onclick="event.stopPropagation(PostDislike(72))">
  <input type="button" id="Comment 72" value="0 comments" onclick="event.stopPropagation(PostComment(72))"><input type="button" style="float: right;" id="Delete 72" value="Delete Post" onclick="event.stopPropagation(PostDelete(72))"><hr></div></div><div id="post 72"></div></div>

while it should be:

<div id="post 72"><div id="Post Info 0"><button class="SameLine" id="NameDisplay" onclick="event.stopPropagation(window.location.href='Profile?bla')">bla</button> <span class="SameLine" id="TimePassed"> &nbsp; 1 month ago</span> <br><br></div><div id="Content 0"><p id="Header" style="text-align: left; font-size: 110%;">bla</p></div><div id="Buttons 0"><input type="button" id="Likes 72" value="0 likes" onclick="event.stopPropagation(PostLike(72))">
    <input type="button" id="Dislike 72" value="0 dislikes" onclick="event.stopPropagation(PostDislike(72))">
    <input type="button" id="Comment 72" value="0 comments" onclick="event.stopPropagation(PostComment(72))"><input type="button" style="float: right;" id="Delete 72" value="Delete Post" onclick="event.stopPropagation(PostDelete(72))"><hr></div></div>

What is the problem here, because I really don't know what is causing it, and also because it works just fine with regular JavaScript and HTML.