An error occurred and it's attached in the screenshot.
Could somebody give me solution regarding this issue.
code is attached below:
import React, { useState } from 'react';
import getConfig from 'next/config';

// Move the getConfig call before using publicRuntimeConfig
const { publicRuntimeConfig } = getConfig();
const apiURL = publicRuntimeConfig.apiURL;

const CreatePostForm = () => {
const [title, setTitle] = useState('');
const [content, setContent] = useState('');

const wordpressApiUrl = apiURL; // Use the value from your configuration

const handleFormSubmit = async (e) => {
e.preventDefault();

const postData = {
title: title,
content: content,
// Add more fields as needed
};

try {
const response = await fetch(wordpressApiUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: Basic ${Buffer.from("username:password", "utf-8").toString("base64")}
},
body: JSON.stringify(postData)
});

if (response.status === 201) {
console.log('Post created successfully');
setTitle('');
setContent('');
} else {
console.error('Error creating post:', response.statusText);
const errorData = await response.json();
console.log('Response:', errorData);
}
} catch (error) {
console.error('An error occurred:', error);
}
};

return (
<div>
<form onSubmit={handleFormSubmit}>
<input
type="text"
placeholder="Title"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
<textarea
placeholder="Content"
value={content}
onChange={(e) => setContent(e.target.value)}
/>
<button type="submit">Create Post</button>
</form>
</div>
);
};

export default CreatePostForm;