问关于react父子组件传值遇到的问题？

import React, { useState} from 'react'
// document.getElementById('button1').addEventListener('click',Fa);
function Fa() {

  const search = () => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then(data => {
        console.log(data);

        let output = 'name';
        //forEach数组遍历
        data.forEach((user) => {
          output += `<li>${user.name}</li>`;
          return (Math.random()-0.5);
        });
       
        //请求后数据赋给变量
        document.getElementById('output').innerHTML = output;
       
      })
      //使用 catch() 去捕获错误
      .catch(err => console.log(err));
  }

  const [count, setCount] = useState(0)
  return (<div >
    <p>父组件中的count :{count}</p>
    <button 
      onClick={() => {
        setCount(count + 1)
      }}
    >
     点击+1
    </button>
    
    <Son value={count} />
    <button  onClick={() => {search()}}>获取name</button><hr/>
  
    <div id="output"> </div>
     <button>筛选按钮</button><hr/>
  </div>)
}

function Son(props) {

  //setCount,子组件没有状态，数组里return方法
const setCount=()=>{
  let arr = [1,7,2,5,9,4,3];
  arr.sort((a,b)=>{
      return (Math.random()-0.5);
  });
  document.write(arr); 
}
  return (
    <div>
       
      <p>子组件中的count :{props.value}</p>
      <button onClick={() => {setCount()}}>请求数据</button>
     
    </div>
  )
}

export { Fa, Son }