关于react父子组件传值遇到的问题！(语言-javascript)

Question

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>`;
        })
        //请求后数据赋给变量
        document.getElementById('output').innerHTML = output;
      })
      //使用 catch() 去捕获错误
      .catch(err => console.log(err));
  }




  const [count, setCount] = useState(0)
  return (<div id="">
    <p>父组件中的count :{count}</p>
    <button id="output"
      onClick={() => {
        setCount(count + 1)
        search()
      }}
    >
      获取信息
    </button>
    <Son value={count} />
  </div>)
}

function Son(props) {

  //setCount,子组件没有状态，数组里return方法

  return (
    <div>
      <p>子组件中的count :{props.value}</p>

    </div>
  )
}

export { Fa, Son }

我的解答思路和尝试过的方法

我想在子组件内实现数组遍历，通过父组件请求回的数据，在子组件内实现功能

我想要达到的结果

父子组件传值。
1.子组件内部存在状态a，a由父组件进行赋值
2.在父组件对a进行更新
3.子组件内部a也要发生变化
4.通过fetch请求
5.请求后的数据赋给变量，通过数组方法进行遍历
6.形成展示name字段的列表
7.点击子组件的按钮，将name字段改为username
8.父组件新增一个筛选按钮，点击筛选按钮后，将name或username字段进行随机排序