救救孩子吧， React 函数父子组件数据更新流程没有搞明白

function App() {
    const [data, setData] = useState([])
    const [sqlType, setSqlType] = useState("ALL")

    useEffect(() => {
        axios.get(updateSql_findAll, {
            params: {
                actualSqlType: sqlType
            }
        }).then(response => {
            console.log(response.data[0].second)
            setData(() => {
                return response.data
            })
        })
    }, [sqlType])

    const onSqlTypeSelect = (event) => {
        setSqlType(event.target.value)
    }

    return (
        <div>
            <select onChange={(event => onSqlTypeSelect(event))}

                    style={{width: "200px"}}>
                <option value={"ALL"}>ALL</option>
                <option value={"SELECT"}>SELECT</option>
            </select>
            <Test data={data[0]}/>
        </div>
    )
}

const Test = (props) => {
    console.log(props.data.second)
    return (<div>
        Test
    </div>)
}

我想的更新流程是，我选择 Sql 类型，useEffect 调用，data 数据变化，重渲染子组件 然而实际的流程是，我选择 Sql 类型，重新渲染了子组件，useEffect 调用，data 数据变化，子组件没有进行渲染