Custom Strapi field shows null

Hi everyone,

I have created a custom field plugin which is connectect to mapbox search API to get locations when the user types. I have created the component and everything seems to be working fine until the part where I need to send the object to API.

When I want to store the location title in the API it works just fine

{
"id": 1,
"companyName": "Stina",
"location": "South Africa",
"published_at": "2021-02-25T22:31:14.550Z",
"created_at": "2021-02-25T22:29:18.335Z",
"updated_at": "2021-02-28T21:55:15.064Z",
}

So this is the code used to get that:

 const updateLocationValue = (locationValue) => {
    props.onChange({
      target: { name: "location", value: locationValue.title },
    });
  };

But when I want to send the whole object so I can get the coordinates as well I get null

{
"id": 1,
"companyName": "Stina",
"location": null,
"published_at": "2021-02-25T22:31:14.550Z",
"created_at": "2021-02-25T22:29:18.335Z",
"updated_at": "2021-02-28T21:55:15.064Z",
}

This is the code that I use to send the whole object, and this works just fine in the console log and I am getting the coordinates as well but I can't pass it to Strapi:

 const updateLocationValue = (locationValue) => {
    props.onChange({
      target: { name: "location", value: locationValue },
    });
  };

I am expecting to see an object just as below so I can get the title and coordinates:

{
"id": 1,
"companyName": "Stina",
"location": {object},
"published_at": "2021-02-25T22:31:14.550Z",
"created_at": "2021-02-25T22:29:18.335Z",
"updated_at": "2021-02-28T21:55:15.064Z",
}

I have registered the field in company.settings.json just as you can see below:

{
  "kind": "collectionType",
  "collectionName": "companies",
  "info": {
    "name": "Company",
    "description": ""
  },
  "options": {
    "increments": true,
    "timestamps": true,
    "draftAndPublish": true
  },
  "attributes": {
    "companyName": {
      "type": "string"
    },
    "location": {
      "type": "locationsearch",
      "columnType": "longtext"
    },
    "products": {
      "collection": "product",
      "via": "company"
    }
  }
}

So the columnType is longtext, I have tried to change it to "object" or "JSON" but it still shows me null

Here is the full code of the component which is working just fine:

import { Label, InputText } from "@buffetjs/core";

const apiToken =
  "****************************************";

export default function Location(props) {
  const [locationTitle, setLocationTitle] = useState("");
  const [suggestions, setSuggestions] = useState([]);
  const [suggestionsOpen, setSuggestionsOpen] = useState(false);
  const wrapperRef = useRef(null);
  const popperEl = useRef(null);
  const [cursor, setCursor] = useState(null);

  const fetchLocation = (searchText) => {
    searchText &&
      fetch(
        `https://api.mapbox.com/geocoding/v5/mapbox.places/${searchText}.json?access_token=${apiToken}`
      )
        .then((response) => response.json())
        .then((data) => {
          const newSuggestions = data
            ? data.features.map((feature) => ({
                title: feature.place_name,
                centerCoordinates: feature.center,
              }))
            : [];
          setSuggestions(newSuggestions);
        });
  };

  useEffect(() => {
    locationTitle && fetchLocation(locationTitle);
  }, [locationTitle]);

  useEffect(() => {
    document.addEventListener("mousedown", handleClickOutside);

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  });

  const updateLocationValue = (locationValue) => {
    props.onChange({
      target: { name: "location", value: locationValue.title },
    });
  };

  const handleClickOutside = (e) => {
    const { current: wrap } = wrapperRef;
    if (wrap && !wrap.contains(e.target)) {
      setSuggestionsOpen(false);
    }
  };

  const setLocationValue = (location) => {
    setLocationTitle(location.title);
    updateLocationValue(location);
    setSuggestionsOpen(false);
  };

  return (
    <div ref={wrapperRef}>
      <Label htmlFor="input">Location</Label>
      <InputText
        name="input"
        onChange={(e) => setLocationTitle(e.target.value)}
        placeholder="Riva 16, 21420, Bol, Croatia"
        type="search"
        value={locationTitle}
        onClick={() => setSuggestionsOpen(true)}
      />
      <div ref={popperEl} className="options-wrapper">
        {suggestionsOpen && (
          <div>
            {suggestions.map((suggestion) => {
              return (
                <div
                  onClick={() => setLocationValue(suggestion)}
                  key={suggestion.id}
                >
                  {suggestion.title}
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}

Could anyone recommend any steps to finalize this?

Thanks a lot!