Estoy tratando de pasar algunos accesorios de niños a padres, y encontré este video en Youtube:

 https://www.youtube.com/watch?v=BtImABK_VHo

Intenté implementar esa lógica (el segundo enfoque) y obtengo algunos errores. Aquí está el código:

La forma en que estoy tratando de renderizar:

 <GameAnswers arrayAnswers={['Yes', 'No']} correctAnswer="Yes" />

GameAnswers.tsx

 import React, { useState } from 'react'; import { ToggleButtonGroup, ToggleButton } from 'react-bootstrap'; import './css/GameAnswers.css'; type Answers = { arrayAnswers: Array<string>, correctAnswer: string } function GameAnswers(props: Answers) { const [selectedAnswer, setSelectedAnswer] = useState(""); const handleAnswerChange = function (e: React.ChangeEvent<HTMLInputElement>) { setSelectedAnswer(e.target.value); } const determineButtonVariant = function (answer: string) { if (answer !== selectedAnswer) { return "primary"; } else if (answer === props.correctAnswer) { return "success"; } else { return "danger"; } } return { selectedAnswer, render: ( <div className="game-answers"> <ToggleButtonGroup type="radio" name="answers"> {props.arrayAnswers.map(function (answer) { return <ToggleButton id={answer} value={answer} onChange={handleAnswerChange} variant={determineButtonVariant(answer)} >{answer}</ToggleButton> })} </ToggleButtonGroup> </div> ) } } export default GameAnswers;

Los errores:

 'GameAnswers' cannot be used as a JSX component. Its return type '{ selectedAnswer: string; render: JSX.Element; }' is not a valid JSX element. Type '{ selectedAnswer: string; render: Element; }' is missing the following properties from type 'ReactElement<any, any>': type, props, key TS2786

¿Es válido ese enfoque del video? El video es del 1 de agosto de 2021, por lo que debería ser, pero recibo algunos errores como puede ver y realmente no sé cómo solucionarlos.

Si es así, ¿qué me estoy perdiendo?