Got this error:

'new' expression, whose target lacks a construct signature, implicitly has an 'any' type.ts$(7009)$

Argument of type 'Syllable$[][]\text{'}$ is not assignable to parameter of type 'PuzzleProps'.

Property 'initialConfig' is missing in type 'Syllable$[][]\text{'}$ but required in type 'PuzzleProps'.ts$(2345)$

boundary.tsx$(7,5)$: 'initialConfig' is declared here.

$($parameter$)$ initialConfig: Syllable$[][]$ ;

On fololwoing code, how to resolve it:

import React,$\{$useState$\}$ from "react";

import $\{$PuzzleController$\}$ from $"./$controller$"$;

import $\{$ Syllable $\}$ from $"./$model$"$;

interface PuzzleProps $\{$

initialConfig: Syllable$[][]$;

$\}$

const Puzzle: React.FC $=(\{$ initialConfig $\})=>\{$

const $[$puzzleController$,$ setPuzzleController$]=$ useState$($new PuzzleController$($new Puzzle$($initialConfig$)))$;

const $[$selected$,$ setSelected$]=$ useState$<\{$ row: number, col: number $\}|$ null$>($null$)$;

const handleSyllableClick $=($row: number, col: number$)=>\{$

if $($selected$)\{$

puzzleController.handleSwap$($selected$.$row, selected.col, row, col$)$;

setSelected$($null$)$; $//$ Reset selection after swap

$\}$ else $\{$

setSelected$(\{$ row, col $\})$; $//$ Select first syllable

$\}$

$\}$;

const handleReset $=()=>\{$

puzzleController.handleReset$()$;

setSelected$($null$)$;

$\}$;

const board $=$ puzzleController.getPuzzleState$()$;

return $($

Swaps: $\{$puzzleController$.$getSwaps$()\}$Score: $\{$puzzleController$.$getScore$()\}$Swaps: $\{$puzzleController$.$getSwaps$()\}$Score: $\{$puzzleController$.$getScore$()\}$Swaps: $\{$puzzleController$.$getSwaps$()\}$Score: $\{$puzzleController$.$getScore$()\}$