Creating functions in react with d3 to assign colors to value

I’m new to d3, and I had been reading their docs and look at examples but nothing comes close to what I need.
I’m using react and typescript.

I need to create 2 functions, one should look something like this:

mapColor(value, lowerBoundColor, upperBoundColor)
@param value {float} - A decimal float which is between 0 and 1.
@param lowerBoundColor {string} - A hex color code corresponding to a value of 0.
@param upperBoundColor {string} - A hex color code corresponding to a value of 1.
@returns {string} - A hex color code corresponding to the value parameter passed in.

And the secound like this:

linearMap(value, lowerBound, upperBound)
@param value {float} - A decimal float between lowerBound and upperBound.
@param lowerBound {float} - A decimal float which represents the minimum value of the dataset to be clamped.
@param upperBound {float} - A decimal float which represents the maximum value of the dataset to be clamped
@returns {float} - A decimal float between 0 and 1 which corresponds to the value parameter passed in.

This is what I have so far:

import React from 'react'
import * as d3 from 'd3'

var data = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8,0.9,1]

const mapColor =  d3.scaleLinear()
.domain([0,1])
.range(["f4a261", "264653"])

How can I create those 2 functions in react to where they can be used as a component in the future.