Trying to use react js to get a reponse from the assistant I made in the playground using the api can anyone tell me what's wrong with the code?

API
1

import React, { useState } from ‘react’;
import axios from ‘axios’;

function App() {
const [response, setResponse] = useState(‘’);
const [query, setQuery] = useState(‘’);
const API_KEY = ‘-’; // Replace with your actual OpenAI API key
const ASSISTANT_ID = ‘-’; // Replace with your specific assistant ID

const solveMathProblem = async () => {
    try {
        const messageResponse = await sendMessage(query);
        setResponse(messageResponse);
    } catch (error) {
        console.error('Error sending message:', error);
        setResponse('Failed to send message');
    }
};

const sendMessage = async (content) => {
    try {
        const response = await axios.post(
            `https://api.openai.com/v1/assistants/${ASSISTANT_ID}/messages`,
            {
                role: 'user',
                content: content
            },
            {
                headers: {
                    Authorization: `Bearer ${API_KEY}`
                }
            }
        );
        return response.data;
    } catch (error) {
        console.error('Error:', error);
        throw error;
    }
};

return (
    <div style={{ margin: '20px' }}>
        <h1>Math Tutor Assistant</h1>
        <div>
            <input
                type="text"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                style={{ width: '300px', marginRight: '10px' }}
            />
            <button onClick={solveMathProblem}>Solve a Math Problem</button>
        </div>
        <div>
            <strong>Response:</strong>
            <p style={{ border: '1px solid #ddd', padding: '10px', marginTop: '10px' }}>
                {JSON.stringify(response, null, 2)}
            </p>
        </div>
    </div>
);

}

export default App;