[Dúvida] react.fragment

em aula foi colocado o assim:

export default function Title( { children } ) {
    return (
        <React.fragment>
            <h1>
                { children }
            </h1>
            <style jsx>{`
                h1 {
                    color: red;
                }
            `}</style>
        <React.fragment/>
    )
}

porem o meu ficou acusando erro de definição falando que o reacti.fragment nao estava definido, pesquisando por fora consegui resolver usando (ou melhor não usando kkkk) assim:

export default function Title( { children } ) {
    return (
        <>
            <h1>
                { children }
            </h1>
            <style jsx>{`
                h1 {
                    color: red;
                }
            `}</style>
        </>
    )
}

então eu achei a forma "correta"? ou eu apenas achei uma "gambiarra"?? e por que não consegui usar o <React.fragment><React.fragment/>??