Using a variable within a variable for style property in React [duplicate]

Currently I’m working on a Pokémon application. Therefor I want to create a dynamic backgroundcolour depending on a variable that changes via useState (The pokémon’s type). Depending on the type the chosen Pokémon has, the background colour should switch to the correct colour variable. My setup is the following:

The different colours are in a separate file:

export const colour_type_bug = "#94bc4a";
export const colour_type_dark = "#736c75";
export const colour_type_dragon = "#6a7baf";
export const colour_type_electric = "#e5c531";
export const colour_type_fairy = "#e397d1";
...

I’m importing the colours from the separate file:

import * as colours from "./components/pokemon/typecolours";

The first type of a Pokémon is declared like this:

const [firsttype, setFirsttype] = useState("electric");

The state of the firsttype variable changes in several other functions, that works fine.

I wrote this function to display the type button:

function DisplayTypeButton() {
    let bgcolour = "colours.colour_type_" + firsttype;
    console.log(bgcolour);

    return (
      <span className="type" style={{ backgroundColour: bgcolour }}>
        {firsttype}{" "}
      </span>
    );
  }

In the console I always get what I expect, it’s something like colours.colour_type_electric. But the background-colour is never declared – if I use the inspector it’s only showing this:

<span class="type">electric</span>

What am I missing here? How is it possible to use a variable that’s changing via useState and how can I declare it correctly in the DisplayTypeButton function?