Dynamically load json file in ReactJS

I'd like to load a json dynamically with ReactJS.

Here's my component codes. When the user selects an id, I want to print its information according to selected id which stores at each json file.

But, as below comments, assigning imported value into the imported_json doesn't work. How can I synchronously assign the values and renders imported_json after that?

import React from 'react';
import { useState } from 'react';

export default function Dashboard() {
  const [selected, setSelected] = useState("");
  let imported_json;

  const handleSelect = (item: any) => {
    setSelected(item);
    const jsonPath = `./json/${selected}.json`;
    import(`${jsonPath}`).then((jsonFile) => {
      console.log(jsonFile); // it correctly prints json file.
      imported_json = jsonFile;
    });
  };

  console.log(imported_json); // imported_json prints undefined.

  return (
    <>

    <div>
      <Select label="Select id" onChange={handleSelect}>
        <Option value="1">1</Option>
        <Option value="2">2</Option>
        <Option value="3">3</Option>
      </Select>
    </div>
    <div>
      {imported_json.modelName}
    </div>

    </>
  );
}

And json file looks like below.

{
  "modelName" : "my_model"
}

Well, you can try to add another state for your json file, in this case, i supose, you will see name of the file, because when you use local variable (let imported_json), react doesn`t re-render your page when you change it, but when you change the state, React will re-render your page. Here is a slightly modified version of your code:

import React from "react";
import { useState, useCallback } from "react";

export default function Dashboard() {
  const [json, setJson] = useState(undefined); // add state for json
  const [selected, setSelected] = useState("");

  // make function async and wrap in useCallback to avoid unnecessary re-renders
  const handleSelect = useCallback(async (item: any) => {
    const value = (await import(`./json/${item}.json`)).default;
    setSelected(item);
    setJson(value);
  }, []);

  // added conditional rendering to avoid error when json is undefined
  return (
    <>
      <div>
        <Select label="Select id" onChange={handleSelect}>
          <Option value="1">1</Option>
          <Option value="2">2</Option>
          <Option value="3">3</Option>
        </Select>
      </div>

      {!!json && <div>{json.modelName}</div>}
    </>
  );
}