React ComboBox (npm component) returning [object Object]

I've currently set a task for myself of creating a language selection box, using https://react-combobox.netlify.app/demo as a base and working off of that as I learn React. The code so far I have is returning [object Object] as a result when I select an entry in the combobox.

Code:

import React, { useState } from "react";
import ComboBox from "react-responsive-combo-box";

export default function ComboBoxLang(props) {
    const [selectedOption, setSelectedOption] = useState("");
    const [highlightedOption, setHighlightedOption] = useState("");


    const options = props.dataSet.map ( (inputValue) => {

        // const columnWidth = props.columnsWidth.language_name + "px";
        const columnWidth = props.columnsWidth;

        let keys = Object.keys(columnWidth);
        console.log ('keys are' + keys)
        const renderedColumns = keys.map( columnName =>{
            return(
            <div style={{display:"inline-block", width:columnWidth[columnName]}}>{inputValue[columnName]} </div>
            );
        })

        return (
            <div key={inputValue.id}>
                {renderedColumns}
            </div>
        )
    })
    return (
        <div>
            <h1>React Combo Box</h1>
            <p>
                The selected option -{" "}
                <span style={{ fontWeight: "bold" }}>
          {" "}
                    {selectedOption.length > 0 ? selectedOption : "None"}
        </span>
            </p>
            <p>
                The highlighted option -{" "}
                <span style={{ fontWeight: "bold" }}>
          {" "}
                    {highlightedOption.length > 0 ? highlightedOption : "None"}
        </span>
            </p>
            <ComboBox
                options={options}
                placeholder="choose country"
                defaultIndex={4}
                optionsListMaxHeight={300}
                style={{
                    width: "500px",
                    margin: "0 auto",
                    marginTop: "50px"
                }}
                focusColor="#20C374"
                renderOptions={(option) => (
                    <div className="comboBoxOption">{option}</div>
                )}
                onSelect={(option) => setSelectedOption(option)}
                onChange={(event) => console.log(event.target.value)}
                enableAutocomplete
                onOptionsChange={(option) => setHighlightedOption(option)}
            />
        </div>
    );
}

index.js code:

import React from 'react';
import ReactDOM from 'react-dom';
import ComboBoxLang from './combobox_test.js';

const languages = [
    {
        "id": 1,
        "language_name": "Afrikaans",
        "language_native_name": "Afrikaanse taal",
        "language_full_name": "Afrikaanse taal (Afrikaans)",
        "language_code": "af",
        "translation_engine_id": 2,
        "translation_engine_name": "Google"
    },
    {
        "id": 2,
        "language_name": "Albanian",
        "language_native_name": "Gjuha shqipe",
        "language_full_name": "Gjuha shqipe (Albanian)",
        "language_code": "sq",
        "translation_engine_id": 2,
        "translation_engine_name": "Google"
    }
];


class App extends React.Component {
    render () {
        return (
            <div>
                <ComboBoxLang dataSet={languages} columnsWidth={{language_name:200,language_native_name:300}}/>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('drop-down-menu')
);

The goal is to effectively have the language, and the native language (or language code at a later date) to display within the combo-box once selected. I've left the 2 "Displayed" and "Selected" boxes so that, once it works, I can understand a bit how it works, and allow other things to interact or reference those items. For now, I am stuck trying to figure out why it spit's out [object Object] and where it is actually in need of correcting.