i can not import * as tf from “@tensorflow/tfjs” in reactjs

I am using react “^17.0.2” and @tensorflow/tfjs “^3.14.0”

I am trying to build a predictive algorithm to predict the class of iris, depending on the data inserted into the system through input fields
I have made a training and testing JSON file on my react app.

the code is like the following

    import react, { Component } from "react";
import * as tf from "@tensorflow/tfjs";
import trainingSet from "../training.json";
import testSet from "../testing.json";

import './form.css';

const Form = () => {



    let trainingData, testingData, outputData, model;
    let training = true;
    let predictButton = document.getElementsByClassName("predict")[0];

    const init = async () => {
        splitData();
        createModel();
        await trainData();
        if (!training) {
            predictButton.disabled = false;
            predictButton.onclick = () => {
                const inputData = getInputData();
                predict(inputData);
            };
        }
    };

    const splitData = () => {
        trainingData = tf.tensor2d(
            trainingSet.map(item => [
                item.sepal_length,
                item.sepal_width,
                item.petal_length,
                item.petal_width
            ]),
            [130, 4]
        );

        testingData = tf.tensor2d(
            testSet.map(item => [
                item.sepal_length,
                item.sepal_width,
                item.petal_length,
                item.petal_width
            ]),
            [14, 4]
        );

        outputData = tf.tensor2d(
            trainingSet.map(item => [
                item.species === "setosa" ? 1 : 0,
                item.species === "virginica" ? 1 : 0,
                item.species === "versicolor" ? 1 : 0
            ]),
            [130, 3]
        );
    };

    const createModel = () => {
        model = tf.sequential();

        model.add(
            tf.layers.dense({
                inputShape: 4,
                units: 10,
                activation: "sigmoid"
            })
        );

        model.add(
            tf.layers.dense({
                inputShape: 10,
                units: 3,
                activation: "softmax"
            })
        );

        model.compile({
            loss: "categoricalCrossentropy",
            optimizer: tf.train.adam()
        });
    };

    const trainData = async () => {
        let numSteps = 15;
        let trainingStepsDiv = document.getElementsByClassName("training-steps")[0];
        for (let i = 0; i < numSteps; i++) {
            let res = await model.fit(trainingData, outputData, { epochs: 40 });
            trainingStepsDiv.innerHTML = `Training step: ${i}/${numSteps - 1}, loss: ${res.history.loss[0]
                }`;
            if (i === numSteps - 1) {
                training = false;
            }
        }
    };

    const predict = async inputData => {
        for (let [key, value] of Object.entries(inputData)) {
            inputData[key] = parseFloat(value);
        }
        inputData = [inputData];

        let newDataTensor = tf.tensor2d(
            inputData.map(item => [
                item.sepal_length,
                item.sepal_width,
                item.petal_length,
                item.petal_width
            ]),
            [1, 4]
        );

        let prediction = model.predict(newDataTensor);

        displayPrediction(prediction);
    };

    const getInputData = () => {
        let sepalLength = document.getElementsByName("sepal-length")[0].value;
        let sepalWidth = document.getElementsByName("sepal-width")[0].value;
        let petalLength = document.getElementsByName("petal-length")[0].value;
        let petalWidth = document.getElementsByName("petal-width")[0].value;

        return {
            sepal_length: sepalLength,
            sepal_width: sepalWidth,
            petal_length: petalLength,
            petal_width: petalWidth
        };
    };

    const displayPrediction = prediction => {
        let predictionDiv = document.getElementsByClassName("prediction")[0];
        let predictionSection = document.getElementsByClassName(
            "prediction-block"
        )[0];

        let maxProbability = Math.max(...prediction.dataSync());
        let predictionIndex = prediction.dataSync().indexOf(maxProbability);
        let irisPrediction;

        switch (predictionIndex) {
            case 0:
                irisPrediction = "Setosa";
                break;
            case 1:
                irisPrediction = "Virginica";
                break;
            case 2:
                irisPrediction = "Versicolor";
                break;
            default:
                irisPrediction = "";
                break;
        }
        predictionDiv.innerHTML = irisPrediction;
        predictionSection.style.display = "block";
    };

    init();



    return (

        <div>


            <h1>Define, train and run a machine learning model in JavaScript with Tensorflow.js</h1>

            <section className="data-inputs">
                <h3>Iris classification</h3>
                <p>Training in progress...</p>
                <p className="training-steps"></p>
                <div className="input-block">
                    <label htmlFor="sepal-length">Sepal lenth:</label>
                    <input name="sepal-length" type="number" min="0" max="100" placeholder="1.5" />
                </div>

                <div className="input-block">
                    <label htmlFor="sepal-width">Sepal width:</label>
                    <input name="sepal-width" type="number" min="0" max="100" placeholder="0.4" />
                </div>

                <div className="input-block">
                    <label htmlFor="petal-length">Petal length:</label>
                    <input name="petal-length" type="number" min="0" max="100" placeholder="1.0" />
                </div>

                <div className="input-block">
                    <label htmlFor="petal-width">Petal width:</label>
                    <input name="petal-width" type="number" min="0" max="100" placeholder="0.7" />
                </div>

                <button className="predict" disabled>Predict</button>
            </section>

            <section className="prediction-block">
                <p>Iris predicted:</p>
                <p className="prediction"></p>
            </section>


        </div>


    )
}


export default Form;

in the browser I get the following errors, these are 4 of them:

ERROR in ./src/component/form.js 32:19-30

export 'tensor2d' (imported as 'tf') was not found in '@tensorflow/tfjs' (possible exports: version)

export 'sequential' (imported as 'tf') was not found in '@tensorflow/tfjs' (possible exports: version)


ERROR in ./src/component/form.js 39:14-29

export 'layers' (imported as 'tf') was not found in '@tensorflow/tfjs' (possible exports: version)


ERROR in ./src/component/form.js 44:14-29

export 'layers' (imported as 'tf') was not found in '@tensorflow/tfjs' (possible exports: version)


ERROR in ./src/component/form.js 51:17-30

export 'train' (imported as 'tf') was not found in '@tensorflow/tfjs' (possible exports: version)