how to customize tsx syntax using babel?

I’m a newer to babel,I want to transform the code:

const posts = []

export const PostList = () => {
    const [fetchSignal, setFetchSignal] = useReducer(signal => !signal, false)
    const withRefresh = useWithRefreshScope()
    useEffect(() => {
        getArticles().then((res) => {
            withRefresh(
                () => {
                    posts.push(...res.data.articles)
                 
                }
            )
        })
    }, [fetchSignal])
    return (
        <>
     
        </>
    )
}

to this:

const posts = []
@useWithRefreshScope
export const PostList = () => {
    const [fetchSignal, setFetchSignal] = useReducer(signal => !signal, false)
    useEffect(() => {
        getArticles().then((res) => {
            withRefresh{
                    posts.push(...res.data.articles)
                }
        })
    }, [fetchSignal])
    return (
        <>
 
        </>
    )
}

I just want to create a scope syntax to reduce some boilerplate code,so that i need to write a babel plugin(maybe not?)
how can i do that?(inspired by kotlin)