Using library react-chess-puzzle to create puzzle

Question

I have a problem, I am working in react and I successfully made made fist puzzle but for some reason I can get to figure out how to use <Puzzle.Reset/> and <Puzzle.Hint/> components that library gives you. Also for some reason my 'nextBtn' is not showing. Can somebody help me here is the code of my Puzzle component.

Here is the look of my Puzzle tsx file.

import React, { useState,useEffect  } from 'react';
import { ChessPuzzle } from "@react-chess-tools/react-chess-puzzle";
import './Puzzle.css';
import SuccessDialog from '../Popup/SuccessDialog/SuccessDialog';
import { environment } from '../../environment/environment';
import {Chess} from 'chess.js';
import { Chessboard } from 'react-chessboard';

/*const [puzzlesArray, setPuzzlesArray] = useState([]);

  // Make a GET request to fetch puzzle data
  useEffect(() => {
    const puzzleUrl = environment.apiUrl + "/puzzle";
    fetch(puzzleUrl)
      .then((response) => response.json())
      .then((data) => {
        setPuzzlesArray(data);
      })
      .catch((error) => {
        console.error('Error fetching puzzles:', error);
      });
  }, []);*/
 /* 
  const puzzlesArray = [
    {
      fen: "4kb1r/p2r1ppp/4qn2/1B2p1B1/4P3/1Q6/PPP2PPP/2KR4 w k - 0 1",
      moves: ["Bxd7+", "Nxd7", "Qb8+", "Nxb8", "Rd8#"],
    },
    {
      fen: "rnbqkbnr/ppp1pppp/8/3p4/3P4/8/PPP2PPP/RNBQKBNR b KQkq - 0 2",
      moves: ["d4", "e6", "exd4", "Nf6"],
    },
    {
      fen: "rnbqkbnr/ppp2ppp/8/3pp3/3P4/2N2N2/PPP2PPP/R1BQKB1R b KQkq - 0 4",
      moves: ["Nxe4", "dxe4", "Nxe5", "Nxe5", "Bxe5", "Bxe5"],
    },
  ];
  
  const Puzzle = () => {
    const [currentPuzzleIndex, setCurrentPuzzleIndex] = useState(0);
    const [currentPuzzle, setCurrentPuzzle] = useState(puzzlesArray[currentPuzzleIndex]);
    const [buttonPopup, setButtonPopup] = useState(false);
    const [isPuzzleSolved, setIsPuzzleSolved] = useState(false);
  
    const handleNextPuzzle = () => {
      if (currentPuzzleIndex < puzzlesArray.length - 1) {
        setCurrentPuzzleIndex((prevIndex) => prevIndex + 1);
        setCurrentPuzzle(puzzlesArray[currentPuzzleIndex + 1]);
        setButtonPopup(false);
        setIsPuzzleSolved(false);
      }
    };
  
    const handlePuzzleFinish = () => {
      setIsPuzzleSolved(true);
    };
  
    useEffect(() => {
      setCurrentPuzzle(puzzlesArray[currentPuzzleIndex]);
      setButtonPopup(false);
      setIsPuzzleSolved(false);
    }, [currentPuzzleIndex]);
  
    return (
      <div className='puzzleBox'>
        <ChessPuzzle.Root key={currentPuzzleIndex} puzzle={currentPuzzle} onSolve={handlePuzzleFinish}>
          <ChessPuzzle.Board onPieceDragEnd={handlePuzzleFinish} />
          <MuiButton className='nextBtn' onClick={handleNextPuzzle}>
            Next Puzzle
          </MuiButton>
          {isPuzzleSolved && <SuccessDialog trigger={buttonPopup} setTrigger={setButtonPopup} />}
          <ChessPuzzle.Hint  showOn={["in-progress","not-started"]}/>
          <ChessPuzzle.Reset showOn={["in-progress","failed"]}/>
        </ChessPuzzle.Root>
      </div>
    );
  };
  
  export default Puzzle;*/


const puzzlesArray = [
  {
    fen: "4kb1r/p2r1ppp/4qn2/1B2p1B1/4P3/1Q6/PPP2PPP/2KR4 w k - 0 1",
    moves: ["Bxd7+", "Nxd7", "Qb8+", "Nxb8", "Rd8#"],
  },
  {
    fen: "rnbqkbnr/ppp1pppp/8/3p4/3P4/8/PPP2PPP/RNBQKBNR b KQkq - 0 2",
    moves: ["d4", "e6", "exd4", "Nf6"],
  },
  {
    fen: "rnbqkbnr/ppp2ppp/8/3pp3/3P4/2N2N2/PPP2PPP/R1BQKB1R b KQkq - 0 4",
    moves: ["Nxe4", "dxe4", "Nxe5", "Nxe5", "Bxe5", "Bxe5"],
  },
];

const Puzzle = () => {
  const [currentPuzzleIndex, setCurrentPuzzleIndex] = useState(0);
  const [currentPuzzle, setCurrentPuzzle] = useState(puzzlesArray[currentPuzzleIndex]);
  const [buttonPopup, setButtonPopup] = useState(false);
  const [isPuzzleSolved, setIsPuzzleSolved] = useState(false);

  const handleNextPuzzle = () => {
    if (currentPuzzleIndex < puzzlesArray.length - 1) {
      setCurrentPuzzleIndex((prevIndex) => prevIndex + 1);
      setCurrentPuzzle(puzzlesArray[currentPuzzleIndex + 1]);
      setButtonPopup(false);
      setIsPuzzleSolved(false);
    }
  };

  

  const handlePuzzleFinish = () => {
    setIsPuzzleSolved(true);
  };

  useEffect(() => {
    setCurrentPuzzle(puzzlesArray[currentPuzzleIndex]);
    setButtonPopup(false);
    setIsPuzzleSolved(false);
  }, [currentPuzzleIndex]);

  return (
    <div className='puzzleBox'>
      <h1>Chess Puzzle's</h1>
      <ChessPuzzle.Root
        puzzle={{
          fen: currentPuzzle.fen,
          moves: currentPuzzle.moves,
        }}
        onSolve={handlePuzzleFinish}
      >
        <ChessPuzzle.Board onPieceDragEnd={handlePuzzleFinish} />
        <button className='nextBtn' onClick={handleNextPuzzle}>
          Next Puzzle
        </button>
        {isPuzzleSolved && <SuccessDialog trigger={buttonPopup} setTrigger={setButtonPopup} />}
        <ChessPuzzle.Hint showOn={["in-progress", "not-started"]} />
        <ChessPuzzle.Reset showOn={["in-progress", "failed"]} />
      </ChessPuzzle.Root>
    </div>
  );
};

export default Puzzle; 

And this is my css for Puzzle component

/* Puzzle.css */

.puzzleBox{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #27272c;
    padding: 3%;
    margin-left: 10%;
    gap: 1rem;
    font-size: 1rem;
    padding: 4%;
    width: 80%;
    height: 50%;
}
  

.nextBtn{
  display: inline-block;
}

/* Style for the chess board */
.chess-board {
  max-width: 100%; /* Make the chess board responsive */
  width: 300px; /* Adjust the width as desired */
  height: auto; /* Maintain aspect ratio */
  border: 2px solid #333; /* Example border style */
}

  
  /* Style for the "Next Puzzle" button */
  .nextBtn {
    margin-top: 10px;
    background-color: #007bff; /* Example button color */
    color: #fff; /* Example text color */
    padding: 10px 20px;
    border: none;
    cursor: pointer;
  }
  
  /* Hover effect for the button */
  .nextBtn:hover {
    background-color: #0056b3; /* Example hover color */
  }
  
  /* Media query for smaller screens */
  @media (max-width: 768px) {
    /* Adjust styles for smaller screens here */
    .chess-board {
      width: 100%; /* Use full width for smaller screens */
      max-width: none; /* Remove the max-width */
    }
  }

Like you see I tried to use a lot of stuff and I got puzzle to work but can't seem to figure out problem with buttons.