Duplicate messages ( not duplicated of pass issues), avatar logo and userinput disabled

[ejgutierrez74]

Describe the bug
The steps array is not shown properly as should be...

To Reproduce
This is my steps object:

[
  {
    "id": "0",
    "message": "Hola amigo!",
    "trigger": "1"
  },
  {
    "id": "1",
    "message": "Por favor hazme una pregunta e intentaré ayudarte.",
    "trigger": "2"
  },
  {
    "id": "2",
    "message": "dsfdasfdasdas",
    "trigger": "3"
  },
  {
    "id": "3",
    "message": "Respuesta del bot",
    "trigger": "4"
  },
  {
    "id": "4",
    "message": "dsfdasfdasdas",
    "trigger": "5"
  },
  {
    "id": "5",
    "message": "Respuesta del bot",
    "trigger": "6"
  },
  {
    "id": "6",
    "user": true
  }
]

Result:
In screenshots
1- Some messages are duplicated
2 - AvatarBot is not showing
3 - once as a user writes the first prompt or question, the user input appears disabled, and you cant continue the chat

Expected behavior
That the steps array would be shown propely in chatbot.

Screenshots

.

Desktop (please complete the following information):

• OS: Ubuntu 22.04
• Browser Firefox
• Version 126.0 (64-bit)

Additional context
React with vite

So my main objective is create a chatbot to use with AI using API ( gemini or chatgpt). So i would replace the message "Respuesta del bot" with the response of the model of AI after sending him the message with the question, and if possible with the history of the chat conversation.
Then left the bot ready to receive a new userinput ( now dont know why after sending the first message, the userinput is disabled)

My code:

import ChatBot from 'react-simple-chatbot';
import { ThemeProvider } from 'styled-components';
import chatlogo from '../../assets/robot-chatbot-icon-sign-free-vector.jpg';
import { useState } from 'react';


     // Creating our own theme
     const theme = {
        background: '#C9FF8F',
        headerBgColor: '#197B22',
        headerFontSize: '20px',
        botBubbleColor: '#0F3789',
        headerFontColor: 'white',
        botFontColor: 'white',
        userBubbleColor: '#FF5733',
        userFontColor: 'white',
    };

    // Set some properties of the bot
    const config = {
        botAvatar: chatlogo,
        floating: true,
    };

   

export function ComponentChatBox() {

    const stepsInicial = [
        {
            id: '0',
            message: 'Hola amigo!',
    
            // This calls the next id
            // i.e. id 1 in this case
            trigger: '1',
        }, {
            id: '1',
    
            // This message appears in
            // the bot chat bubble
            message: 'Por favor hazme una pregunta e intentaré ayudarte.',
            trigger: '2'
        }, {
            id: '2',
    
            // Here we want the user
            // to enter input
            user: true,
            trigger: (userInput) => handleUserInput(userInput),
        },
    ];
    
    const [steps, setSteps] = useState(stepsInicial);
  //  const [id, setId] = useState('');

   
 

function handleUserInput(userInput) {
   
   
    if (userInput.value.length === 0) {
        console.log('No se ha introducido nada');
    }
    else {
        //Elimino la entrada con user a true
        steps.pop();
        let idActual= steps.length-1;
        
        // Aquí puedes manejar la entrada del usuario y agregarla a los pasos
        const questionUser = {
            id: `${idActual+ 1}`,
            message: userInput.value,
            trigger: `${idActual + 2}`,
        };

        const responseBot = {
            id: `${idActual + 2}`,
            message: 'Respuesta del bot',
            trigger: `${idActual + 3}`,
        };
        
        const nextStep = {
                id: `${idActual + 3}`,
                user: true,
                trigger: (userInput) => handleUserInput(userInput),
            };
        
        steps.push(questionUser, responseBot, nextStep);
        
      //  setId(`${idActual + 3}`);
        setSteps([steps]);

        //return `${idActual + 3}`;
        }
    }


    return (
        <div className="ComponentChatBox">
            <ThemeProvider theme={theme}>
                <ChatBot

                    // This appears as the header
                    // text for the chat bot
                    headerTitle="EduBot"
                    steps={steps}
                    {...config}
                />
                {console.log(steps)}
            </ThemeProvider>
        </div>
    );
}

export default ComponentChatBox;

Any help would be apreciated

My project:
https://github.com/ejgutierrez74/workshop-react-eduardo

As you can see this is an educational project and i need this to teach my students of JavaScript and front end web apps.

[ejgutierrez74]

Little improvement or clues.
I tried to run in production ( npm run build and npm run preview) and seems that at least the duplicated messages dissapeared. But the rest of the problems continue

Just to add more info: react v18.2 and vite 5.2