Estoy tratando de hacer una barra de habilidades que se carga cuando el usuario se desplaza a ese componente React.Js. Actualmente no puedo hacer que funcione. Este es el código:

 const Progress = ({done}: {done: string}) => { const [style, setStyle] = useState({}); useEffect(() => { window.onscroll = () => { setTimeout(() => { const newWidth = { opacity: 1, width: `${done}%` } setStyle(newWidth); }, 200); } }, [done]); return ( <div className={styles.bg}> <div className={styles.graphContainer} style={style}> {done}% </div> </div> ) } const SkillsComponent = () => { return ( <> <Container> <h2>Skills</h2> <div className={styles.bg}> <div className={styles.graphContainer}> <Progress done='90' className={`${styles.skills} ${styles.html}`}>HTML</Progress> </div> </div> </Container> </> ); } export default SkillsComponent;

este es el codigo css:

 .graphContainer { padding-top: 10px; width: 100%; } .skills { background-color: white; text-align: left; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; color: white; } .bg { background-image: repeating-linear-gradient(90deg, white, #222222 3px, #222222 33.3%); border: 2px solid #fff; margin-bottom: 4em; display: inline-block; min-width: 100%; } .html { width: 0%; background-color: #3f50b5; border-radius: 0px 12px 12px 0; margin-left: 4px; }

Estoy usando Typescript y actualmente recibo este error:

Escriba '{ niños: (cadena | Elemento)[]; hecho: cadena; nombre de clase: cadena; }' no se puede asignar al tipo 'IntrinsicAttributes & { done: string; }'.
La propiedad 'hijos' no existe en el tipo 'IntrinsicAttributes & { done: string; }'.ts(2322)