Tengo una función ordinaria de JavaScript como esta:

 // frontend/src/static/js/components/daw/index.js export default function Daw() { return ( <> <div>Hello world.</div> </> ); }

Estoy tratando de usar la función anterior dentro del siguiente componente ReactJS:

 // frontend/src/static/js/pages/_VideoMediaPage.js import React from 'react'; import Daw from '../components/daw'; export class Page extends React.PureComponent { constructor(props) { super(props); } render() { return ( <> <div>{Daw()}</div> </> ); } }

Pero estoy recibiendo este error:

Error no detectado: Llamada de gancho no válida. Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función. Esto podría suceder por una de las siguientes razones:

1. Es posible que tenga versiones que no coincidan de React y el renderizador (como React DOM)
2. Podrías estar rompiendo las Reglas de los Hooks
3. Es posible que tenga más de una copia de React en la misma aplicación

Pregunta

¿Cuál es la forma correcta de usar la función ordinaria dentro del componente ReactJS?