Set width react.ts

Bonjour,
dans mon projet, j'utilise Jotai et pub/sub. J'ai 3 divs générées par du json

export const tasks = [
  {
    id: 1,
    title: "Task 1",
    width: 15,
    bg: "#3FB8D4",
    fg: "black",
  },
  {
    id: 2,
    title: "Task 2",
    width: 40,
    bg: "#7FFFD4",
    fg: "black",
  },
  {
    id: 3,
    title: "Task 3",
    width: 45,
    bg: "#ADD8E6",
    fg: "black",
  },
];

J'ai déja mit en place mouseup, mousedown et mousemove, tous fonctionnes. J'en suis à la ligne qui est commentée par HERE. Je dois changer la largeur du composant enfant donc changer la valeur de width dans ma data. Changer la data n'est pas un soucis, mais que la div change de taille dynamiquement je n'y parvient pas.
Composant parent:

import React, { useEffect, useRef, useState } from "react";
import CSS from "./style.module.css";
import { superMouseAtom } from "./../../atoms";
import { useAtom } from "jotai";
import { tasks } from "./../../data/tasksData";
import Task from "./Task";
import { ITask } from "./../../interfaces/Interfaces";

type Props = {
  children?: React.ReactChild[];
};

const Tasks = ({ children }: Props) => {
  const myself = useRef<HTMLDivElement | null>(null);
  const mouseDown = useRef(false);

  const [subs] = useAtom(superMouseAtom);

  const onMouseEvent = (evt: MouseEvent) => {
    if (evt.type === "mousedown") {
      mouseDown.current = true;
      return;
    }

    if (evt.type === "mouseup") {
      mouseDown.current = false;
      return;
    }

    const target = evt.target as HTMLElement;

    if (!mouseDown.current) return;

    const targetId = target.id;
    const task = tasks
      .filter((t) => t.id.toString() === targetId)
      .pop() as ITask;

    if (!task) return;
    /* here */

  };

  useEffect(() => {
    subs &&
      subs.subscribe({
        target: myself.current as HTMLElement,
        callback: onMouseEvent,
      });

    return () => {
      subs &&
        subs.unsubscribe({
          target: myself.current as HTMLElement,
          callback: onMouseEvent,
        });
    };
  }, [subs]);

  return (
    <div ref={myself} data-type="task-container" className={CSS.tasks}>
      {tasks.map((task) => (
        <Task key={task.id} data={task} />
      ))}
    </div>
  );
};

export default Tasks;

Composant enfant:

import React, { useEffect, useRef } from "react";
import { ITask } from "../../interfaces/Interfaces";
import CSS from "./style.module.css";

type Props = {
  data: ITask;
};

const Task = ({ data }: Props) => {
  return (
    <div
      id={data.id.toString()}
      className={CSS.task}
      style={{
        width: data.width + "%",
        backgroundColor: data.bg,
        color: data.fg,
      }}
    >
      <p className={CSS.taskTitle}>{data.title}</p>
      <p className={CSS.taskSize}>{data.width}</p>
    </div>
  );
};

export default Task;

Si quelqu'un pouvait éclairer ma lanterne. Merci beaucoup
Modifié par Don-pasqual (06 Apr 2022 - 09:20)